IE6 Fixed Positioning

Question

I need to fix a footer to the bottom of the viewport. IE 6 is the problem--and yes, it must work in IE 6. That much, is not my call.

Using this:

div#footer {
 width:1020px;
 position: absolute; 
 top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
 left: expression(50%+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');} 
}

In my IE6.css I can fix the footer to the top of the page. But if I switch it to this:

div#footer {
 width:1020px;
 position: absolute; 
 bottom: expression(0+((e=document.documentElement.scrollBottom)?e:document.body.scrollBottom)+'px'); 
 left: expression(50%+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');} 
}

It goes haywire. Am I implementing the expression function wrong for fixing it to the bottom of the viewport?

Thanks!

Answer 1

Try using this instead of expressions:

* {
    margin: 0;
}
html, body {
    height: 100%;
    overflow: auto;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.box {
    position: fixed;
    left: 50%;
    top: 180px;
    margin: 0 0 0 -370px;
}
* html .box { 
    position: absolute;
}

/*

Fixed Positioning in IE6 
http://ryanfait.com/

*/

Answer 2

Don't use the expression clause. From my experience it can render the page a little on the slow side and behaves oddly. Some times it'll work and others it'll simply fail not gracefully.

I've had good success with these methods.

• http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
• http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

But without seeing your entire page it's a little harder to see if any of the links I provided will get in the way of your current stylesheet.