Websites in Internet Explorer
Internet explorer 6.0. De internet browser waar menig website bouwer nog wel eens badend in het zweet wakker van wordt.
Als men deze website bezoekt met Internet Explorer 6.0 wordt deze goed weergegeven. Weliswaar niet exact hetzelfde als in een moderne browser maar toch. Om dat voor elkaar te krijgen heb ik van alles uit moeten proberen en uitzonderingen moeten programmeren. Men ziet bovenaan in de website ook een melding verschijnen om aan te moedigen een moderne browser te gebruiken. Deze melding is een initiatief van http://www.ie6nomore.com . IE 6.0 is einde 2001 uitgekomen. Voor toen wellicht een redelijke browser, maar nu kan het echt niet meer. Webdesigners hebben al zeeën van tijd weg gegooid om hun websites zichtbaar te krijgen in deze browser.
Eerst is het belangrijk te begrijpen hoe CSS werkt. Je definieert de eigenschappen van een element in je website. Bijvoorbeeld een titel element H1. Dat kan als volgt:
.follow h1
{
display:block;
background:url(../images/article_head_repeat.png) repeat-x;
height:23px;
margin:0 0 10px 0;
font-size:13px;
padding:10px 0 0 10px;
color:#525252;
text-align:left;
}
Dus alle h1 tags binnen de class follow wordt op deze manier vorm gegeven.
Dit kan later weer worden overschreven. Dus stel we roepen .follow h1 nogmaals aan verderop in het stylesheet.
.follow h1
{
font-size:16px;
}
Dan wordt dus de font-size overschreven naar 16px maar worden de andere eigenschappen behouden.
Hiervan maken we gebruik. Voordat we gaan programmeren moet bepaald worden waar het fout gaat in Internet Explorer en lopen we direct tegen nog een probleem aan. Hoe krijg je IE6.0 op je computer?! Gelukkig is er voor Windows een gratis programma te downloaden van Tredosoft. Hiermee is het mogelijk meerdere versies van IE op je computer te zetten. Deze oplossing is niet helemaal perfect, omdat sommige originele dll’s van IE niet behouden worden, maar in de meeste gevallen geeft het voldoende informatie.
Als we IE6.0 eenmaal op de computer hebben staan is het tijd de site op te zoeken. Het is verstandig dit al zittend te doen! De grootste problemen ontstaan namelijk bij de zorgvuldig opgestelde marges en breedtes. IE6.0 neemt het niet zo nou met een paar pixeltjes meer of minder waardoor vooral objecten met een float kunnen verspringen. Het lijkt vaak net of de website is geëxplodeerd!
Identificeer de objecten waar het fout gaat, en dat is niet altijd even gemakkelijk. Hier zijn in ieder geval enkele veel voorkomende fouten:
Breedte
div.box
{
width: 100px;
border: 2px solid black;
padding: 10px;
}
Een moderne browser zal deze box een breedte geven van 124px. Namelijk: 100px + (2 x 10px) + (2 x 2px). IE6.0 houdt het op 100px waardoor de layout totaal anders wordt. De breedte kan nog erger verstoord worden door de volgende bug:
Dubbele Marges
div.box
{
float: right;
margin-right: 20px;
}
Als we nu dezelfde box pakken met een marge en een float, dan zal IE de de marge verdubbelen, dus in plaats van 20px wordt het 40px, ook niet bepaald goed voor de layout.
Geen min-width min-height
Stel je hebt een div met een achtergrond afbeelding gepositioneerd aan de bovenkant met een hoogte van 250px maar de content in de div is niet genoeg om die hoogte te halen zodat de hele afbeelding zichtbaar wordt. Dan kan je min-height:250px; aan de div toekennen. IE 6.0 ondersteunt dit niet. Gelukkig gedraagt height zich als min-height in IE.
Geen ondersteuning voor PNG alpha
.png afbeeldingen maken het mogelijk om 24 bits transparantie toe te passen. IE6.0 ondersteunt dat niet en genereert in plaats van transparantie een grijs vlak. Hier zijn verschillende scripts voor te verkrijgen die dit probleem verhelpen. Deze site gebruikt pngfix.
Er zijn helaas nog veel meer bug’s, een eenvoudige google search geeft interessante resultaten. Bijvoorbeeld deze website: http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/ .
Hoe gaat deze site om met IE?
In de head sectie van deze site wordt een gewoon een link gelegd naar het algemene stylesheet. Maar daaronder worden direct een paar uitzonderingen gemaakt als de website wordt bezocht door een zeker versie van Internet Exploder… eh Explorer.
<link rel="stylesheet" type="text/css" href="http://www.nononsensewebsite.nl/styles/nononsense.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.nononsensewebsite.nl/styles/nononsense_ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.nononsensewebsite.nl/styles/nononsense_ie6.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.nononsensewebsite.nl/styles/nononsense_ie8.css" />
<![endif]-->
De stylesheets overschrijven de eerder gedefinieerde objecten zoals eerder besproken. Als we de stylesheet voor ie7.0 bijvoorbeeld nemen zien we dat alleen de eigenschappen waar het fout gaat worden overschreven:
@charset "UTF-8";
/* nononsense website | CSS | IE-Misery | Octografx */
#logo_menu_container {
margin:22px -195px 0 -175px;
}
.ie_wrapup {
position:absolute;
top:230px;
}
#container_bottom
{
margin-top:410px;
}
.follow #container_bottom
{
margin-top:15px;
}
#logo_menu_container h1 {
top:150px;
}
Hierdoor wordt de site dus zonder problemen weergegeven in IE7.0, voor IE6.0 en IE8.0 geld hetzelfde. Helaas kan niet altijd alles worden opgelost, maar de meeste problemen zijn via deze techniek goed af te vangen.
Als men met IE6.0 de site bezoekt komt er prompt bovenaan in de header een waarschuwing te staan. Ik zou iedere web developer aan willen moedigen deze code te implementeren. Voor meer details bezoek http://www.ie6nomore.com.
Hallo!
Mijn naam is Dion Snoeijen en ik programmeer en ontwerp websites, flash app’s en maak 3D visualisaties.
Recente Tweet
19-02 17:36
New updated CoronaSDK Autocomplete for SublimeText2 from http://t.co/CHJEszHs #CoronaSDK #Ansca #Lua #st2 @lano78
Escape flocks ofchristian louboutin shoes, and get a bit of a workout hiking into the Black Canyon of the Yellowstone, where wide stretches of river and prolific hatches support a healthy cutthroat and rainbow population. The best louboutin wedding shoes are pretty remote, so plan on making a multi-day trip. Camping in the Christian Louboutin Short Boots is the best way to get acquainted with its incredible variety of flora and fauna, steaming geysers and bubbling thermal mud pots, spectacular christian louboutin tall boots and river canyons, and extraordinary vistas. Yellowstone has front-country camping facilities at a dozen sites scattered around the park. And backcountry permits are available at most christian louboutin discount and visitor centers.
Door christian louboutin discount op 20 08 2010
In the complicated world we live in, it’s good to find simple soltuonis.
Door Nodin op 17 11 2011