CSS Style position:fixed and Internet Explorer
The CSS styling attribute position:fixed makes an HTML element stationary (does not move on scrolling) and absolutely positioned. If you are familiar with position:absolute, the fixed styling is quite similar except for that it remains in position even on page scroll.
Most of the modern browsers (IE7, Firefox, Opera etc.) support the fixed styling. But older versions of Internet Explorer (prior to IE 7) does not. The problem with older IE is that it completely ignores the fixed attribute and the default styling (position:relative) is applied. This can completely disrupt your page design.
Accepting the fact that IE6 still remains the most widely used web browser, we cannot ignore this issue. One way to solve this is by changing the value of position attribute to absolute (which is the closest to fixed) in case of IE older than version 7. To give the actual effect of fixed we also need to handle the scroll event or else this element will also move along with the rest of the page. In the scroll event you have to reload (hide and show) the element and you get the most closest fixed style implementation in IE.
You may download the complete working page source.
<script type="text/javascript">
/* <![CDATA[ */
var isOldIE = false;
function onPageLoad() {
if (navigator.appName.indexOf('Microsoft Internet Explorer') > -1) {
ver = navigator.appVersion.substr(navigator.appVersion.indexOf('MSIE ')+5,3);
if (ver < 7) {
document.getElementById('fixedDiv').style.position = 'absolute';
window.onscroll = reloadFixedDiv;
}
}
}
function reloadFixedDiv() {
var d= document.getElementById('fixedDiv');
d.style.display = 'none';
d.style.display = 'block';
}
/* ]]> */
</script>
<style type="text/css">
<!--
#fixedDiv {
position:fixed;
right:0px;bottom:0px;
height:72px;
width:256px;
background-color:#ABCDEF;
}
-->
</style>
and also
<body onload="javascript:onPageLoad();">
Note: There will be a slight flickering on the element.