Search code examples
cssinternet-explorer-6sticky-footer

Sticky footer css trick with IE6 not working

I imagine that this question pops up every now and then (I actually read some posts before posting my own question) but here it is again.

How can I get the sticky footer to work on this url with IE 6? (link was removed because it is now broken)

The difference here is that I get a hidden div that shows if you click in "Werknemer" or "AEX" for example.

This is the block that I want to be visible in the bottom of the browser window (not at the end of the page as it currently is).

Thanks for the help!

Solution

  • I've always done position: fixed in IE with css expressions. I find it's the least destructive as far as your markup is concerned. The only catch is that without Javascript enabled, it doesn't work.

    Here's what you'd put in an IE6 only stylesheet if you're working in quirks mode:

    /* Smooths out the scrolling of #your-fixed-element */
body {
  background-attachment: fixed; 
} 

#fixedElement  {
  position: absolute;      
  left: 0;
  top: expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}

    And if you're in standards mode, use this #fixedElement declaration instead:

    #fixedElement  {
  position: absolute;      
  left: 0;
  top: expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight);
}