Problemen med IE

Som alla webbdesigners säkert har märkt vid det här laget så har Internet Explorer sina brister. Allting verkar fungera i Firefox med aldrig i IE, främst när det kommer till padding och margin. Även om majoriteten av mina besökare använder Firefox är det ändå ca. 20% som använder sig av IE 6.0+.

Hur man fixar problemen

Ena lösningen är alltså att göra om hela CSS-filen från scratch men det är ju inte särskilt lockande. Den andra lösningen är att skapa en CSS som är endast är för IE samtidigt som du göra en som är för alla webbläsare förutom IE.
IE problem
Alltså kan du ha en CSS-fil för IE, en för Firefox och de andra samt en med den informationen som båda tolkar likadant.

Hur man går tillväga

För att rikta sig mot IE skriver man följande när man inkluderar css-filen:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Och för att rikta sig mot de andra skriver man:

<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="inte_ie.css" />
<![endif]-->

Du kan även rikta dig mot speciella versioner av IE. Detta är väldigt bra eftersom IE 6.0 är ett av de som krånglar mest och fortfarande har ett par användare kvar. Då lägger du helt enkelt till versionen när du hämtar, dvs:

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

Eller om du vill rikta dig mot en version av IE och lägre:

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6_mindre.css" />
<![endif]-->

Kända buggar i IE

Ibland kan det vara svårt att veta vad som inte fungerar och ifall det verkligen är IE som krånglar. Några av de kände problemen med IE är iallfall:

Padding och borders

#box{width: 100px; border: 1px; padding 10px;}

De flesta moderna webbläsare kommer ge den här boxen width: 122px medan IE 6 kommer att ge den width: 100px.

min-height och min-width

Det här två användbara uttryck för att tex. låta ett element vara expanderat redan innan det fylls av innehåll. IE totalt ignorerar detta. Som tur är finns det ett enkelt sätt att lösa detta. Du byter ut min-height: 1000px mot:

min-height: 1000px;
height:auto !important;
height:1000px;

*Inte säkert att det löser problemet helt, men det hjälper nog en del.

Inga transparenta bilder

Även här är det IE6 som spökar. Det mest kända filformatet för den här sortens bilder är .png och detta stöder inte IE6 alls. Det transparenta blir oftast någon rolig färg. Detta finns det dock en mängd olika fixes för.

Kom ihåg

Det är trots allt väldigt, väldigt få som använder IE6 och mindre vilket gör att man kanske inte behöver ta hänsyn till dessa personer till 100% utan kan låta dem lida lite så de förhoppningsvis byter upp sig.