Kao što svi znate optimizovati sajt za Internet Exporer može biti mnogo naporno. Nekada se samo kodiranje produži i po nekoliko sati kako bi se dobio isti izgled u IE6 prvenstveno, a posle i u IE7 (od nedavno i u IE8). Ono što želim ovim postom da pokažem jeste kako možete da izbegnete ozbiljnije probleme u IE-u, a samim tim i da skratite vreme predviđeno za kodiranje. Pokazaćemo 3 česta problema sa IE-om. Nadamo se da će ovaj post pomoći u budućoj izradi i kodiranju vaših projekata.

Pa da krenemo sa prvim hack-om:

1. Uslovni komentar.

Uslovni komentar je specijalni Html komentar koji govori IE brower-u u Windows-u koji CSS je za njega specijalno napravljen, a ostali browser-i preskaču ovu liniju koda jer njima nije namenjena. Sam kod uslovnog komentara bi izgledao ovako:

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

Takođe možete da stavite uslovni komentar samo za određenu verziju IE browser-a. Npr:

<!–[if IE7]>
<link rel=”stylesheet” type=”text/css” href=”ie7-fix.css” />
<![endif]–>

Ovaj kod će samo IE7 da govori šta da radi, tj kako da stilizuje HTML.

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

Ovaj kod će samo IE6 da govori šta da radi, tj kako da stilizuje HTML.

2. Dupla margina za float element

Kao što većina zna IE6 pravi problem kada je float-ovan element i ima marginu. Tačnije Internet Explorer 6 duplira marginu i time pravi haos na samom sajtu. Kako to izbeći?
Evo jednog primera kako možete odmah u kodiranju da mislite na IE6 i njegove bagove.

CSS code:

.neka_klasa {
float: left;
width: 300px;
margin-left:100px;
}

Ovako bi trebalo da izgleda

a ovako izgleda u IE6

Kako se problem rešava?

Iz nepoznatog razloga kada elementu koji je float-ovan i ima maginu stavite u liniju CSS-a “display:inline” onda će i u IE6 staviti marginu kako treba.
Ovo će drugi browseri da zanemare dok će IE6 da pokaže normalnu marginu, a samim tim će se videti pravi izgled naše klase ili samog elementa.

ovako bi izgledao sadašnji kod nase klase

.neka_klasa {
float: left;
width: 300px;
margin-left:100px;
display:inline;
}

Internet Explorer i min-height

Koliko puta vam se desilo da imate problema sa min-height u Internet Exploreru?
Koliko puta ste se mučili da namestite, i na kraju niste uspeli.

Postoji mnogo načina da se ovaj problem reši (javascript hacks, itd…), ali ja ću pokazati jedan koji meni uvek završava posao.

Da pogledamo kod i da ga objasnimo:

#neki_div {
min-height:100px;
}

Ovako bi izgledao kod koji svaki browser vidi, ali ne i IE6.
A sada ćemo videti kako će da izgleda kod i za IE6:

#neki_div {
min-height:100px;
height: 100px;
}

html > body #neki_div {
height: auto;
}

Evo i kratkog objašnjenja: Prvo smo zadali min-height za sve browsere, a zatim smo stavili visinu koju IE ne priznaje. Potom smo stavili “child selectors” koji IE vidi i vraća height na “auto”.

Kao što smo već rekli ovo je samo jedan od načina da uradite min-height za Internet Exporer i iskreno se nadam da će vam ovaj primer poslužiti u daljem radu.