Div cu height 1px in IE6
Sunt multe ocaziile in care avem nevoie de div-uri cu o inaltime sub 10 pixeli (pentru a face niste separatoare, de exemplu).
Sa zicem ca avem un div cu clasa “numediv” :
<div class=”numediv”></div>
Acestei clase ii asociem o propietate css:
.numediv{width: 100px; height: 1px; background: #cccccc;}
Daca testam pagina cu Mozilla, Chrome, sau IE7 & IE8, se va afisa o linie gri de un pixel inaltime si 100 latime.
In IE6 insa, se va afisa un div cu inaltimea de 10 px. Cauza acestui bug este preformatarea textului de catre browser.
Astfel, default, IE6 va pune un font size de 10px.
Pentru a putea formata corect div-ul, trebuie sa resetam css-ul. Acest lucru se poate realiza cu ajutorul unui reset.css (aceasta metoda aplicandu-se la tot site-ul), sau se poate aplica punctual, doar la clasele care necesita acest lucru.
Clasa din exemplul nostru va arata in felul urmator:
.numediv{width: 100px; height: 1px; background: #cccccc; font-size: 1px;}
Daca problema persista, putem adauga la css si un “line-height: 1px;”
Spor la treaba si la web design!