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

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 e开发者_JS百科dit 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

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