Fixing the Css ‘position:fixed’ issue in IE6 using Javascript.

admin — Tue, 24 Mar 2009 12:40:23 +0000

I had read some where that IE 7 supports the Css property ‘position:fixed’ . But for IE 6 it can be fixed using Javascript.It was the problem I faced when I tried to make one lightBox type of pop-up using Jquery and Ajax.

It worked fine for firefox. As we scroll the window down or up, position of the pop-up remained fixed in the pop up. But in IE it did not worked. So i tried to fix this issue in the IE6 using Javascript.

Here is the CSS code for the pop-up Box.

#popUp
 
{
 
position:fixed;
 
_position:absolute;
 
top:100px;
 
left:300px;
 
............................
 
}

Javascript Code.

var b_version=navigator.appVersion;
var version=parseFloat(b_version);
 
window.onscroll = function()
{
if ((browser=="Microsoft Internet Explorer") && (version>=6))
  {
             var top  = (document.body.parentNode.scrollTop);
             document.getElementById('popUp').style.cssText="top:"+top+"px";
  }
}

When You use this javascript code. It does not makes the pop as fixed as that like by Firefox. But When the user scrolls the window. Pop up also scrolls down and gets remained in the fixed position.

Prabeen's Blog » CSS

Fixing the Css ‘position:fixed’ issue in IE6 using Javascript.