CSS IE hacks

Als vervolg op de vorige post: soms kun je een stylesheet nog net zo tweaken wat je wilt, maar een gelijke layout in verschillende browsers krijg je niet voor elkaar. Er is hier echter een mooie oplossing voor in de vorm van het nuttig gebruiken van een bug in IE.

Stel je hebt de volgende stylesheet definitie:

div#main { float: right; }

Stel dat in IE deze div verkeerd op de pagina wordt geplaatst, namelijk 20 pixels te hoog, zodat de inhoud over de inhoud van de daarboven staande div heen wordt gezet. In andere browsers gebeurt dit niet. Het mooiste zou nu natuurlijk zijn dat je een universele oplossing zou kunnen gebruiken, maar IE blijft pertinent weigeren de div een stukje omlaag te plaatsen. Wat we dan doen is het volgende extra stukje code toevoegen:

* html div#main { margin-top: 20px; }

IE leest deze bovenste regel als html div#main { en voegt dus aan de div#main de extra margin-top toe. In andere browsers wordt deze regel echter overgeslagen, omdat hij niet klopt; het html element is de parent van alle elementen en kan dus officieel niet als child van * (wat "alle elementen" inhoudt) een stylesheet definitie krijgen. We kunnen hier dus echter dankbaar gebruik van maken aangezien IE wel vaker de boel upfuckt in CSS.

Samengevat: als je stylesheet overal behalve in IE werkt dan maak je van de desbetreffende class of id definitie gewoon een kopie met extra IE aanwijzingen, maar dan met het extra * html stukje ervoor.

Bron: Star html Selector Bug