, eigen Nederlandse vertaling van mijn Engelse artikel.
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.
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):
| Browser | Geteste versie | Randen |
|---|---|---|
| Google Chrome | 4.1.249.1064 unknown (45376) | Nee |
| Opera | 10.53, Build 3374 | Nee |
| Firefox | 3.6.3 | Ja |
| Internet Explorer | 8.0.6001.18904 | Ja |
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.
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.
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.
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.
Copyright © 2010 by R. Harmsen.