Ik heb m'n lijnen terug!

29 mei 2010, eigen Nederlandse vertaling van mijn Engelse artikel.

Tabellen en celranden

Ik hou wel van tabellen in HTML. Ze vormen een handige manier om informatie overzichtelijk weer te geven.

Maar een paar maanden terug waren er opeens geen lijntjes (ook bekend als randen of borders) meer. Dat maakt overzichtelijk gepresenteerde informatie verwarrend.

Gisteren kwam ik erachter waarom. Het is iets in mijn CSS. Ik wist niet of het mijn fout was of dat sommige browsers zich niet aan de standaards houden.

Hoe dan ook, het werkt nu wel. Verderop de details.

Browsers

Achteraf gezien is het probleem begonnen toen ik overging van Firefox op Chrome. Nu ik het nog eens test, vind ik (onder Windows Vista ™ Home Premium, Service Pack 2):

BrowserGeteste versieRanden
Google Chrome4.1.249.1064 unknown (45376)Nee
Opera10.53, Build 3374Nee
Firefox3.6.3Ja
Internet Explorer8.0.6001.18904Ja

CSS

In mijn CSS stond dit:

table, td, th
{
   padding-top   : 0.3ex;
   padding-bottom: 0.7ex;
   padding-left  : 0.5em;
   padding-right : 1.0em;
   border        : 0.03em solid #007777;
}

In een internetpagina die ik nu even niet terug kan vinden, vond ik dat het zo beter en duidelijker kan:

   border        : thin solid blue;

Na wat experimenteren vond ik dat de reden dat sommige browsers (bladerprogramma's) mijn verzoek negeerden, was dat ik 'em' als dikte-eenheid gebruikte. Als ik points ('pt') gebruik, werkt het wel in alle browsers.

   border        : 1.5pt solid #007777;

Ik had em's gebruikt omdat ik wilde dat de dikte van de randlijnen mee zou variëren met de lettergrootte. Dat is misschien wel een beetje raar, omdat tekst een lettergrootte heeft, maar binnen een 'td' (table division) hoeft de lettergrootte niet steeds gelijk te zijn.

Validatie

Wat me nog steeds verbaast is dat de CSS-validator van w3.org geen bezwaar maakte, tegen welke variant in mijn CSS dan ook. Deze bron suggereert dan weer dat alleen pixels toegestaan zouden zijn. Dus waarom werken em's dan alleen in twee browsers en points in alle vier?

Let op: de combinatie van een getal en een eenheid moet tegen elkaar aan geschreven staan, er mag geen spatie tussen. Sommige browsers accepteren wel een spatie, maar de validator vind dat niet goed.

Te dun

Bij verder experimenteren bleek het echte probleem niet in de gebruikte eenheid te zitten, maar in het getal zelf en de standaardwaarden die browsers toepassen. Het punt (woordspelling, grappig, haha) is dat 0.03em echt heel klein is, zo klein dat sommige browsers dat afronden tot nul pixels zodat ze helemaal geen randlijnen toonden. Met 0.04em en hoger (in mijn voorbeelden) zie je ook daarin wel een lijntje. Kennelijk hanteren Explorer en Firefox de regel dat alles wat kleiner is dan één pixel, standaard één wordt en niet nul. Hetzelfde geldt bij gebruik van point als eenheid van dikte.

Effect

Deze verbetering betreft diverse pagina's op mijn site:

Onregelmatige werkwoorden in het Spaans en Portugees
Os sons da Língua portuguesa - The pronunciation of the Portuguese of Portugal
The pronunciation of the Portuguese of Portugal - Alphabetic listing
Sound sample acknowledgements and bibliography
Spanish de donde, from where, twice added de?
Portuguese words of Germanic origin
Why any next message in a thread is really nothing
Pranto and llanto, but not chanto
Uma queda queda
Bomen in Portugese achternamen
Namen op '-es' en '-ez'

etc., etc.


Kleuren: Neutraal Raar Geen voorkeur Pagina opnieuw laden