Position:fixed to work on IE 6/7/8 and mozilla

Question

hello all, I want to make a div's position fixed on the bottom right of a page..( a chat box) ..how do i do that through a css file which will work on all IE6/7/8 and mozilla ....for now i have

#chatBox{ position: fixed; bottom: 0%; right: 1%;} This doesn't work on IE..and my constraint is that I am just allowed to edit this CSS file ( so can't set the html to strict mode too). Workarounds I found on the web just talk about position w.r.t to the top of the page not bottom.

thanks Mohan

Answer 1

You can fix IE with CSS expressions. Serve the following to IE with conditional comments:

/* smooths out the IE expression scroll - foo doesn't need to exist */
body{
   background:url(foo) fixed;
}

/* fixed scrolling element */
#bottom-fixed-element {
   position: absolute;  
   right: 0;
   top: expression(
      document.body.scrollTop + document.body.clientHeight - this.clientHeight
   );
}

If you're not able to alter the source to include a conditional comment, you can get around it with CSS hacks, but it's not recommended:

#bottom-fixed-element {
   position: fixed;
   bottom: 0;
   right: 0;

   _position: absolute;  
   _top: expression(
      document.body.scrollTop + document.body.clientHeight - this.clientHeight
   );
}

Edit

If you need to support both quirks and standards mode, you can test in the expression:

top: expression(
   (document.compatMode && document.compatMode == 'CSS1Compat') ?          
       (documentElement.scrollTop + documentElement.clientHeight - this.clientHeight) :
       (document.body.scrollTop + document.body.clientHeight - this.clientHeight)
);