regelafstand veranderd door gebruik charset=UTF-8

  • Onderwerp starter Onderwerp starter Uturn
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
U

Uturn

Gebruiker
Lid geworden
7 apr 2009
Berichten
100
Ik dacht verstandig te zijn boven in mijn document UTF8 als tekenset op te geven met

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

in de <head> te plaatsen.

Toen viel het me op dat de regelafstand van mijn figuuronderschriften groter is geworden. Ik gebruik voor die onderschriften <small> .
Ik heb het al geprobeerd weg te halen met - line-height: 1.2; - in CSS, maar dat hielp niet.

Hoe kan ik dit oplossen (misschien UTF-8 toch maar weghalen)?
 
't Is toch verbazend hoeveel mensen denken dat je door de ingewanden van internet kan kruipen om de code te bekijken :)
Oftewel: zonder code of beter nog: 'n link naar waar 't staat, is er weinig van te zeggen.
In principe heeft 'n charset geen enkele invloed op de regelafstand. De regelafstand is gekoppeld aan de lettergrootte (als je 'm niet apart opgeeft) en utf-8 heeft niets te maken met de lettergrootte.
Dus is er iets anders aan de hand, wat dan ook. Maar dat is dus niet te zeggen zonder code. En graag ook de browser en de versie daarvan waar het probleem zich voordoet.
utf-8 zou ik laten staan. Het is de enige charset die universeel is en hij wordt tegenwoordig algemeen aanbevolen. (Niet de enige, maar wel de enige die voor algemeen gebruik is.)
Vast twee dingen:
* De charset MOET de eerste regel zijn in de <head>, omdat zich anders problemen kunnen voordoen in sommige browsers.
* Als je Notepad gebruikt en opslaat als utf-8 kunnen in IE 7 op vreemde plaatsen lege regels worden toegevoegd, zonder dat er codes te zien zijn. Dat is 'n bug in Notepad en IE 7. Die treedt trouwens alleen op in IE 7 in combinatie met Notepad. Mocht je die combinatie gebruiken, dan zou dat de grotere regelafstand kunnen verklaren.
 
Oh, en [JS]/* CSS */

line-height: 1.2;[/JS]werkt niet - je moet natuurlijk wel een eenheid erachter zetten. Pixels (px) bijvoorbeeld.
 
Jawel, line-height is een van de weinige waar 'n eenheid niet nodig is. Als je gewoon 1.2 opgeeft, werkt dat net zo als 1.2em of 120%. Er schijnt wel een of ander verschil te zijn met het erven door kinderen, maar dat weet ik zo even niet uit m'n hoofd.
Maar die regelhoogte heeft niets te maken met de charset, dus het lijkt me eigenlijk handiger even naar de oorzaak te zoeken.
 
Ik ging ervan uit dat ik genoeg code had gegeven...:confused::) Hier dan de code waarbij ik de inhoud van de tekst heb weggelaten.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="PrimerStyles.css" />
</head>

<body>
<h3>Kopje</h3>
<p>Tekst</p>
<img src="figuur.png" align="center">
<br />
<small>Onderschrift</small>
</body>

</html>

En de CSS:
PHP: 
  body { 
    color black;
    background: #f8f8ff;
    margin-left: 20px;
    margin-right: 80px;
    font-size: 14px;
    line-height: 1.2;
  }
  h1 { 
    color: black; 
    font-size: 26px; 
    font-family: Helvetica; 
    font-weight: bold; 
  }
  h2 { 
    color: black; 
    font-size: 20px; 
    font-family: Helvetica; 
    font-weight: bold; 
  }
  h3 { 
    color: black; 
    font-size: 18px; 
    font-family: Helvetica; 
    font-weight: bold; 
  }
  h4 {
    color: black;
    font-size: 16px; 
    font-family: Helvetica; 
    font-weight: bold; 
  }
  p { 
    font-family: verdana;
    font-weight: normal;
    margin-right: 20px;
  }
    .outline { 
      font-family: verdana; 
      text-align: justify; 
    }
  b {
    font-family: verdana; 
    font-weight: bold;
  }
    .Alto {
    font-family: verdana; 
    font-weight: normal;
    }
  i.Tekst {
    font-family: verdana; 
  }
  u.Tekst {
    font-family: verdana; 
  }
  a { 
    font-family: verdana;
    font-weight: normal;
  }
  small {
    font-size: 10px;
    font-family: verdana;
  }
  li {
    font-family: verdana;
    font-weight: normal;
  }
  #TitelSectie {
    position: absolute;
    top: 10px;
    left: 420px;
  }
  #MenuSectie {
    position: absolute;
    top: 40px;
    left: 10px;
    width: 150px;
    margin-left: 10px;
    padding-top: 20px;
  }
  #HoofdSectie {
    position: absolute;
    top: 40px;
    left: 170px;
    padding-top: 40px;
  }

Vegras: inderdaad 1.2 werkt ook zonder eenheid (heb ik getest + zie http://www.handleidinghtml.nl/css/css-oud/line.htm)

Getest in FF3.5.4.
 
Laatst bewerkt:
Ik zie ook geen verschil, maar dat zegt volgens mij niet zoveel, omdat de afbeelding en zo ontbreken. Het gaat om 'n probleem dat eigenlijk niets te maken kán hebben met de charset (de kleine kans op 'n bug bij de combinatie Notepad/IE 7 valt dus ook weg, want 't gaat om Firefox).

Je hebt goede kans dat 't probleem weg is als je doet wat peter vazed zegt over de validator, want vrijwel al die fouten zitten in/rond de img.
En haal die bij line-height: 1.2 dan weer even weg, want die kan storen.

Als dat niet helpt en de fout zich nog steeds voordoet, dan is 'n link naar de echte code online handig, want dan zou ik graag álles willen zien. 't Zou bepaald niet de eerste keer zijn dat bijvoorbeeld 'n editor door 'n bug of zo 'n onzichtbare code toevoegt die 'n storing veroorzaakt.
 
Die : vergeten, stom...
Maar het heeft geen effect.

Het staat nog niet online, daar wordt aan gewerkt.

Maar ik heb ontdekt dat als ik die DOCTYPE weglaat, het probleem van die regelafstand is opgelost.
En als ik die UTF-8 declaratie weglaat, hoef ik niet al mijn ' en é enz. te vervangen door codes. Bovendien vind ik die ' die ik gewoon kon copy-pasten mooier dan het effect van &rsquo;

Dus waarom zou ik DOCTYPE en UTF-8 gebruiken?:p
 
Als je met utf-8 je accenten e.d. moet vervangen door &...;, komt dat omdat je het niet als utf-8 hebt opgeslagen. Er wordt in 'n soort tabel gekeken bij opslaan en weergeven. Als die tabellen verschillen, krijg je problemen. Dat is dus op te lossen door het nog 'ns op te slaan als utf-8.
Maar de charset maakt verder niet zoveel uit, hoewel 't wel beter is. Dat doctype is veel belangrijker.

Dat die regelafstand goed is als je 't doctype weghaalt is feitelijk 't bewijs dat 't in je code zit. 't Maakt mij verder niets uit, maar zonder doctype garandeer ik je vroeger of later enorme weergaveverschillen tussen de verschillende browsers. Zo groot, dat die met 'n beetje pech je hele lay-out kunnen slopen. Daar is dat doctype voor. En als je 't dan terug gaat zetten omdat 't niet anders kan, heb je kans dat je je halve site opnieuw kunt gaan maken omdat dan niets meer goed past en zo.
Je kunt de fouten dus wel 'verstoppen' door het weg te halen, maar dat soort fouten gaat je vroeger of later echt opbreken.

'n Doctype zorgt voor de correcte weergave in alle browsers (waarbij vaak wel wat pleisters nodig zijn voor die hopeloze IE 6 en in mindere mate IE 7). Als de regelafstand verkeerd is met 'n doctype, is dat dus echt 't bewijs dat er iets mis is in je code.

Wat je zou moeten doen is in ieder geval dat doctype terugzetten en die fouten die de validator meldt eruit halen. Of doorworstelen natuurlijk, dat kan ook maar dat gaat op termijn vermoedelijk veel meer tijd kosten.
 
Laatst bewerkt:
Awel! Weer zo'n onafgesproken coöperatie op afstand! :)
Terwijl Goeroeboeroe de argumentatie op een rijtje zette, was ik doende een plaatje in te monteren, de html valid te maken, de img een vertical-align te geven, en er achter te komen dat met {display:inline-block} het probleem voor het stricte DOCtype is opgelost.
Ziezo, hoef ik lekker niks uit te leggen! :p

Klikt u maar.

Met vriendelijke groet,
CSShunter

PS:
De line-height doet geen kwaad.
Wat wel kwaad kan, zijn de lettergroottes in px. Als dat relatieve maten worden (in em's), kunnen IE-gebruikers desgewenst via Beeld > Tekengrootte de letters vergroten. Vooral belangrijk omdat er pittig kleine lettertjes gebruikt worden: het doel van een site is gelezen te kunnen worden door een zo groot mogelijk publiek! En dan loop je niet het risico dat de layout in elkaar stort, als iemand de letters in Firefox, Opera, Safari, enz. naar behoefte aanpast.
D.w.z.: dat heb je dan bij het ontwerp-testen al gemerkt - en aangepast. ;)
Om dat ineenstorten te verhinderen zou het zomaar kunnen, dat blijkt dat de { position: absolute; } die voor de verschillende pagina-secties gebruikt wordt, vervangen moet worden door iets anders. Maar dat hangt van de structuur van de pagina af, die in de huidige pagina onzichtbaar is. In elk geval: wees voorzichtig met absolute posities en krappe maten.
 
Ik zal luisteren naar jullie wijze woorden en de doctype terug zetten...
Maar Goeroeboeroe, hoe sla ik de file op in UTF-8? (ik schrijf de codes in kladblok, sla ze op met extensie .html).

Ik zal nadenken over de px vervangen door ems (alhoewel je met px nog steeds de hele pagina op 150% bijv kunt zetten).

Csshunter, jouw oplossing werkt goed! Regelafstand is nu weer normaal. Ik ga het op alle plaatjes met onderschrift toepassen.
Die position: absolute is van divs van een andere opmaak waar ik mee aan het stoeien ben.

Heel erg bedankt voor de moeite.

Ik ben aan het uitzoeken hoe ik de pagina's het beste online kan zetten (nog nooit gedaan), aangezien de inhoud werkgerelateerd is zie ik een mogelijkheid ze aan de website van mijn werk te hangen. Dat volgt nog.
 
Wijze woorden. Oooo, wat mooi... Dat hoor ik niet vaak :)

Ik heb zelf nog Kladblok op XP, maar ik neem aan dat dit (ongeveer) hetzelfde is voor alle versies. Als je kiest voor Bestand -> Opslaan of Bestand -> Opslaan als zie je onderin: Opslaan als type. In dat veld kun je kiezen voor UTF-8.
Als je in 'n bestand in Kladblok bijvoorbeeld 'n accent ziet staan en opslaat als UTF-8, wordt het door Kladblok automatisch gekoppeld aan het volgnummer uit de UTF-8-tabel. Dus dat werkt echt heel erg makkelijk.
Om de goede codering te krijgen moet je alle bestanden even openen en opnieuw opslaan als UTF-8.
Als de browser 't weergeeft met als charset UTF-8, zoekt die het volgnummer weer op in diezelfde tabel en hoppa: de ä blijft 'n ä en is niet plotsklaps Chinees.
('t Is iets ingewikkelder, maar zoiets.)

Sommige mensen hier zijn nogal Spartaans, maar je zou kunnen overwegen om Notepad++ te gaan gebruiken. Dat is zeg maar Notepad met doping. Die kleurt de code bijvoorbeeld, wat erg handig is.

Wat betreft px <> em: met px is dus 't probleem dat de lettergrootte in IE niet is te veranderen, ook niet in IE 8. Wel in alle andere browsers.
 
Wat betreft px <> em: met px is dus 't probleem dat de lettergrootte in IE niet is te veranderen, ook niet in IE 8. Wel in alle andere browsers.
Klik om te vergroten...
Kleine nuance, naar smaak in het nadeel/voordeel van Internet Explorer:
  • Bij px is de lettergrootte in IE niet afzonderlijk te veranderen, ook niet in IE 8; en in het geheel niet in IE6 en eerder.
In géén van de IE-versies tot dusverre kan de lettergrootte (via Beeld > Tekengrootte) los van de rest van de layout worden ingesteld, als de fonts in px zijn gecodeerd. Je kunt klikken wat je wilt op "Extra Klein" t/m "Extra Groot", op het scherm worden de letters niet kleiner of groter.
  • Met ingang van IE7 heeft Internet Explorer er wel een andere optie bijgekregen: "zoomen".
Die optie kan, om het niet te makkelijk te maken, niet via het menu Beeld ingesteld worden, maar zit rechts onderaan in de statusbalk van het browservenster. Je kan kiezen uit verschillende percentages, of zelf een % instellen. Dan worden niet alleen de letters groter, maar de hele pagina wordt ingezoomd/uitgezoomd.
Nadeel: bij vergroten wiepert al gauw 1/3 van de pagina rechts buiten het beeldscherm, en is dan alleen via de horizontale scrollbar te bereiken. Dat is nogal onhandig, als je bv. een menu in een linkerkolom hebt zitten, en het contentblok rechts. Dan moet je dus om de content te kunnen lezen steeds per regel links-rechts-en-terug gaan scrollen.
  • De oude handigheid [Ctrl + muiswieltje] = snel lettergrootte veranderen (als de webbouwer de lettergrootten relatief heeft opgegeven, dus in % of in em) is bij IE7 en IE8 verdwenen, en omgezet naar snel zoomen (dus van de hele pagina tegelijk).
  • Op dezelfde manier is bij IE7 en IE8 op het toetsenbord de handigheid [Ctrl + Plusteken] of [Ctrl + Minteken] voor snel lettergrootte wijzigen overboord gekieperd. Ook dit heeft nu alleen op inzoemen/uitzoemen betrekking.
Zo zoemt IE van verbetering naar verbetering... Benieuwd waar ze bij IE9 mee gaan komen. ;)

En de conclusie blijft staan:
Voor gebruiksgemak en goede toegankelijkheid horen de lettergrootten in de css opgegeven te worden in em of %. Dan hebben de gebruikers zo veel mogelijk keus > die moeten er wel mee overweg kunnen! :)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan