Solució al problema min-height a IE6

Aconseguir crear un full d’estil (CSS) que sigui interpretat de la mateixa manera per tots els navegadors és una tasca díficil i que a vegades por portar a la desesperació. Principalment, això és degut a que Internet Explorer 6, que és el navegador que menys compleix els estàndards, és un dels navegadors més utilitzats avui dia tot i que fa un temps que va sortir la nova versió, l’IE7.

Mentres esperem que amb l’aparició de les últimes versions dels navegadors més populars anem convergint cap a un estàndard universal d’interpretació de css i xhtml, que encara trigarà a arribar, anirem proposant diferents solucions als problemes més comuns.

min-height with !important

Un problema que sovint trobem amb IE6 és que no interpreta la propietat min-height, a diferència de la resta Firefox, Opera i ara IE7. Per solucionar aquest problema és suficient amb fer servir la declaració !important. Aquesta declaració fa que s’ignorin les regles en cascada, és a dir, la propietat que vagi acompanyada d’un !important tindrà més importància que qualsevol altre.

El fet que IE6 ignora aquesta declaració permet fer servir aquesta declaració per solucionar diversos problemas d’interpretació com el min-height. Amb el següent exemple es veurà clarament:

bloc {
min-height: 200px;
height: auto !important;
height: 200px;
}

En aquest cas definim un mínim d’alçada del bloc de 200px. Com que IE6 i inferiors no interpreta aquesta propietat, passarà a la següent línia. Com que tampoc interpreta l’!important passarà directament a llegir la propietat height. La resta de navegadors li donaran una alçada automàtica al navegador amb un mínim de 200px.