Ik ben de laatste tijd veel bezig geweest met web development, en voor hun die ook dagelijks websites moeten bouwen, jullie weten allemaal hoe hinderlijk Internet Explorer is. Het heeft nooit gelijk de beste output als Firefox. Firefox heeft gewoon de “Did you mean” feature ingebouwd erin, terwijl Internet Explorer niet – bij wijze van spreke. Helaas gebruiken nog veel meer mensen Internet Explorer en we moeten daarmee leren leven.
Een heel handig trucje om fouten in IE op te lossen is door dit stukje script op te nemen in de head (<HEAD></HEAD>) van je website:
<!–[if IE 7]>
<link href=”ie_style.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
Bovenstaande werkt dus voor IE 7 browsers. (met dank aan Alain voor het corrigeren)
Maak nu een bestand ie_style.css en zet daarin de aanpassingen die speciaal bestemd zijn voor IE 7.
Voorbeeld:
Je hebt een class voor je navigatie, deze ziet er zo uit:
.navigatie
{
padding-top:8px;
}
Nu heb je dus twee gevallen die je kan krigen voor Internet Explorer;
Geval 1: padding-top moet 4 px worden, plaats je:
.navigatie
{
padding-top:4px;
}
Geval 2: padding-top moet weg, plaats je:
.navigatie
{
padding-top:0px;
}
De onderstaande methode hiervoor is fout:
.navigatie
{
}
Let wel, dat je altijd de originele class kopieert en plakt in je stylesheet voor Internet Explorer en dat je de waarden niet gewoon verwijderd, anders pakt ie gewoon de originele waarden.
Om nog een voorbeeld te geven:
Je hebt een background image gebruikt, maar je merkt dat het voor problemen zorgt in Internet Explorer, dus het moet weg.
Je class heet .inhoud en ziet er zo uit:
.inhoud
{
background-image: url(images/plaatje.jpg);
}
Voor je ander stylesheet plaats je dus:
.inhoud
{
background-image: none;
}
Hopelijk vond je deze voorbeelden nuttig 
Veel succes!
Abonneer aan dit blog via RSS of via e-mail, om op de hoogte te blijven van de meest recente ontwikkelingen. Volg mij op Twitter.
Relevante items
{ 4 comments }
Ehm, bovenstaand voorbeeld werkt juist niet in IE7, maar in alle versies van IE voor IE7.
Voor IE7 moet dit de code zijn:
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie_style.css” />
<![endif]–>
Voor IE7 en lager kun je dit gebruiken:
<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie_style.css” />
<![endif]–>
De ‘lt’ staat voor ‘lower than’ en ‘lte’ voor ‘lower than or equal to’.
Meer info: http://www.quirksmode.org/css/condcom.html (niet mijn site)
U hebt helemaal gelijk hoor Alain, ik had een verkeerde code gekopieerd uit mijn log.
Hartelijk dank voor je reactie
“Je hebt een background image gebruikt, maar je merkt dat het voor problemen zorgt in Internet Explorer, dus het moet weg.”????
zou het niet zinvol zijn om uit te leggen hoe je een background image in IE kunt gebruiken? Deze manier van problem-solving is weinig educatief, zeker zolang IE nog de meest gebruikte browser is.
De bedoeling van mijn voorbeeld is om te wijzen hoe je moet omgaan met een tweede stylesheet voor een specifieke browser. Niet om problemen voor jou in wisselgeld om te zetten.
Reacties gesloten.