Met de intrede van versie 7 van Internet Explorer zijn er tegelijk ook een heleboel nieuwe problemen ontstaan. Zoals jullie wellicht al weten wordt CSS-code niet altijd hetzelfde geïnterpreteerd in Internet Explorer in vergelijking met andere browsers zoals Firefox. Met name dan vooral de codes die de positionering van elementen verzorgen.

Om toch hetzelfde resultaat te bekomen, wordt er dan gebruik gemaakt van zogenaamde CSS-hacks, codes in de stylesheet die enkel door bepaalde browsers gelezen worden, maar niet door Internet Explorer.

3 stylesheets voor de prijs van 1

In Internet Explorer 7 heeft Microsoft getracht om een heleboel van deze verschillen weg te werken. Een goede zaak zou je denken, maar helaas moet je ook rekening houden met het feit dat niet iedereen deze nieuwe versie draaien heeft. We kunnen deze hacks niet simpelweg afschaffen, want dan zou een gebruiker met Internet Explorer 6 een rammelende website voor ogen geschoteld krijgen. In plaats van rekening te houden met 2 verschillende CSS-codes ( voor Internet Explorer en voor Mozilla-browsers) gaan we nu een 3e versie moeten bijmaken voor Internet Explorer 7. Om de overzichtelijkheid te bewaren gaan we deze CSS-code voortaan in 3 aparte stylesheets genereren:

• een stylesheet voor Mozilla-browsers;
• een stylesheet voor Internet Explorer 7;
• een stylesheet voor alle andere versies van Internet Explorer.

Moeten we dan voortaan 3 volledige stylesheets aanmaken? Neen, want dat zou een hele hoop extra werk betekenen. De aparte stylesheets bevatten alleen de regels die de problemen in IE oplossen. Hacks dus, maar dan zo dat je je hoofdstylesheet schoon houdt.

De juiste stylesheet inlezen

De juiste stylesheet door de browser laten inlezen gebeurt door gebruik te maken van conditional comments.

Eerst plaats je je gewone -tag: hierin verwijs je naar de stylesheet die alle browsers zullen inlezen. Internet Explorer heeft weer een eigenaardigheid ingebouwd die het gebruik van conditional comments mogelijk maakt: het leest en interpreteert de comments na de . Firefox en andere browsers lezen deze commentaar echter niet, maar natuurlijk wel de -tag. De CSS-hacks die ervoor zorgen dat de website net hetzelfde eruit ziet in IE komen dan in de andere stylesheets te staan.

Zo kun je voor elke versie van Internet Explorer een aparte stylesheet bouwen en hoef je geen CSS-hacks meer te gebruiken binnen je stylesheet. Let erop dat je een spatie plaatst tussen "IE" en het versienummer, anders zal de stylesheet niet ingeladen worden.

<link rel="stylesheet" href="/moz.css" type="text/css" />
<!--[if IE 7]><![endif]--> 
<!--[if lte IE 6]><link rel="stylesheet" href="/../ie6.css" type="text/css" />
<![endif]--> 

Om je stylesheets dan de juiste CSS-codes te geven, zul je regelmatig moeten wisselen tussen de verschillende browsers om het resultaat te testen.

Tip

Het is helaas niet mogelijk om verschillende versies van Internet Explorer naast elkaar te draaien op één computer. Gelukkig is er voor dit probleem een oplossing. Via het programma MultipleIE kun je versie 3, 4, 5, 5.5 en 6 van Internet Explorer installeren. Dit draait zonder problemen naast je gewone installatie van Internet Explorer 7.