The martyrdom of Saint Me

Nu de multe ori am dat peste aceasta problema si nu de multe ori am vazut oameni in toata firea care plangeau din cauza nenorocitului de Internet Explorer 6 care adauga ceva pixeli in box model.

Si datorita “scurtelor” mele cautari pe net si nopti pierdute in fata unui monitor am gasit cateva metode de a rezolva aceasta mica problema.

Prima metoda inseamna ceva mai multa munca deoarece inseamna sa se scrie minim 3 variante de cod css pentru fiecare browser.
In header se introduce chestia asta:

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


Prima declaratie se refera la Internet Explorer 7 si care vor mai urma. A doua declaratie se refera la Internet Explorer 6 si mai mici, iar ultima varianta la Firefox, Opera sau altele.
Asa ca eu unul scriu un css pentru Firefox apoi in functie de erori fac modificari pentru IE6 si IE7.

A doua varianta care o folosesc mult mai des pentru ca e mult mai usor de folosit si chiar mult mai practica e sa scriu asa in codul css:


#bottomTxt {
  clear:left;
  width: 880px;
  margin: 5px 0px 0px 10px;
}
 
html>body #bottomTxt {
  clear:left;
  width: 880px;
  margin: 5px 0px 0px 20px;
}


Singura diferenta intre declaratii este ca la a 2-a am adaugat inca 10px pentru distanta din partea stanga.
Dar smecheria e ca IE6 nu cunoaste child-selectors deci nu citeste html>body ci doar #bottomTxt.
Deci prima declaratie este citita de IE6 iar a 2-a de IE7, Firefox si altele.

Aceste metode mi se par mult mai omenesti de folosit si nu prezinta la fel de multe pericole ca si hack-urile serioase de css si cel putin ultima varianta m-a scos din multe probleme.

Sper ca va e de folos… si daca mai stiti si alte trick-uri nu va fie teama sa le spuneti .