Hacka till fixerad positionering på IE6

Som ni kanske märker på mina senare inlägg så är jag i en hård batalj med IE6. Webbläsaren stödjer inte CSS-attributet position:fixed så vill man ha element som ligger på samma plats så blir det problem.

I mitt fall ville jag ha en footer som hela tiden låg i nedre kanten av skärmen. På de moderna webbläsarna fungerar denna CSS.

#footer {
    width:700px;
    z-index:10;
}

div[id=footer] { /* for real browsers */
    position: fixed !important;
    top:auto !important;
    bottom:0;
}
 

För att få till samma effekt på IE6 så kan man länka in ett speciellt stylesheet med hjälp av conditional comments. För att bara länka på IE6 eller lägre versioner kan man köra så här.

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

Jag hittade sen scriptet jag behövde på en sida som visar hur man kan positionera element på IE6, uppe i mitten eller som i mitt fall i nederkanten. Eftersom CSSen använder "stjärn-hacket" så hade det inte behövt att ligga i en egen stylesheet. Men det kändes bättre eftesom jag inte ville blanda in denna bizarra kod för de moderna webbläsarna.

* html div#footer {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}

Comments