Sticky footer css trick with IE6 not working

Question

Hi all,

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? http://bit.ly/1T9n4E

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!

Answer 1

You need to search for "IE6 position fixed" (position: fixed is the CSS you'd use in better browers.)

This site has a fair few solutions: http://www.wickham43.supanet.com/tutorial/headerfooterfix.html (I'd guess this example is the one you're looking for)

Answer 2

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);
}