CSS: min-height i IE6
Igennem mit arbejde er jeg begyndt at rode rigtig meget med CSS igen, på godt og ondt. Det er så meningen, at jeg vil dele nogle af de erfaringer, jeg gør, og ligeledes for at jeg selv hurtigt kan finde de forskellige tips og tricks, at jeg har oprettet en kategori, CSS, på min blog, som efterhånden også har stået stille hen i lang tid.
Første tip er et “trick”, som de fleste webudvikler nok allerede kender, men som er utrolig nyttigt, og som skal være i enhver webudviklers værktøjskasse indtil IE6 dør.
Jeg har tit stået i en situation, hvor mine forskellige undersiders højde har varieret, og hvor kunden har ønsket, at hver side som minimum skulle have en bestemt højde, men på samme tid være dynamiske, så undersiderne kan ekspanderer.
Dette kan nemt løses ved at definere attributten min-height til den ønskede minimum højde, men IE6 understøtter desværre ikke min-height. Dog understøtter den height, og netop height attributten opføre sig faktisk som min-height i IE6. Ved at sætte en fast højde på fx 1000px, får man overraskende nok en højde på 1000px i IE6. Dog er højden ikke låst fast, hvorfor man ligeledes får et dynamisk design, som kan udvide sig, men ved at definere en fast højde låses højden fast til de 1000px i nyere browsere, og så er man lige vidt.
Løsningen er tagget !important. !important bliver normalt brugt til at beskrive præcedens, hvor det i CSS altid er den sidst specificerende regel. Med tagget !important kan man dog gøre en regel tidligere i sit stylesheet præcedens, og da IE6 ignorer tagget kan man cross-browser sikre min-height effekten på følgende måde:
#Elementet-som-skal-have-min-height {
min-height: 1000px; //Understøttes ikke af IE6
height: auto !important; //Understøttes ikke af IE6, men gør denne regel/højde præcedens i alle nyere browsere
height: 1000px; //Hos IE6 er denne højde præcedens, men i nyere browsere overskrives attributten
}