Een veel voorkomend probleem bij het gebruik van webstandaarden is de miserabele ondersteuning daarvan door de (nog steeds) meest gebruikte browser, IE. Er zijn daarom allerlei hacks en workarounds uitgevonden om IE toch in redelijke mate de gewenste stijlregels te laten toepassen. Natuurlijk bestaan er ook CSS bugs in andere browsers, maar niet zoveel en zo serieus als in IE, tenzij we het over dinosauriërs als IE hebben. Ik wil hier graag een paar tips geven over hoe je deze zaken kunt tekkelen.

 

Allereerst is het natuurlijk handig om, naast de noodzakelijke kennis van hoe CSS werkt, op de hoogte te zijn van welke bugs roet in het eten gooien. Er zijn een aantal goede (voornamelijk Engelstalige) online resources te vinden, waarvan m.i. de belangrijkste zijn: de wiki van de css-discuss lijst en de Position Is Everything site.

 

Box model

Een groot probleem is vaak het box model, dat in IE (altijd) en IE6 (in “quirks mode”) anders wordt geïnterpreteerd dan de bedoeling is. Ik kan alleen maar aanraden het artikel van Holly en John goed te bestuderen, alsook die van Peter-Paul Koch en Mike Hall. Om dingen voor mezelf simpel te houden, gebruik ik een methode om IE 5 en 6 hetzelfde te behandelen, door IE6 in quirks mode te gooien met een comment vóór de html begintag, of (in het geval van XHTML) een XML declaratie vóór de doctype declaratie. Daarna kunnen we gebruik maken van de star html hack (waarbij in het voorbeeld 100px de werkelijke breedte is, en 124px de aangepaste breedte is voor IE):

 

div#x { width:100px; margin:10px; padding:10px; border:2px solid #888; } * html div#x { width:124px; }

 

òf een workaround met een child selector:

 

div#x { width:124px; margin:10px; padding:10px; border:2px solid #888; } body>div#x { width:100px; }

 

Deze oplossingen vind ik zelf eleganter dan de Tantek box model hack.

 

Centreren

Een ander probleem waar velen tegenaan lopen is het centreren van een blok element. IE begrijpt margin:auto niet, wat hier eigenlijk voor bedoeld is. Het is dan handig te weten dat IE met text-align:center behalve tekst ook blok elementen centreert. Samengevat zou dit in de stylesheet kunnen komen te staan:

 

body { text-align:center; min-width:60em; } div#y { width:60em; margin:0 auto; text-align:left; }

 

Margin en padding defaults

Ook iets wat tot veel vragen kan leiden, zijn de (verborgen) standaard instellingen van de verschillende browsers. Dit is vooral goed merkbaar bij de verschillende benaderingen van margins en paddings van lijsten en headings. Om tijdrovend gehannes te voorkomen met allerlei aanpassingen en wellicht hacks om verschillende waarden aan verschillende browsers te voeren, is het handig om je stylesheet te starten met:

 

* { margin:0; padding:0; }

 

waarna je zelf kunt specificeren hoeveel margin en padding je wilt hebben op de verschillende elementen.

 

Ik sta open voor verzoeken van lezers om andere problemen danwel tips te behandelen…