Fixed Positioning in IE6

While modern web browsers and even IE7 support using position:fixed to fix content in a set positionin the browser window (usually the top left corner), IE6 does not support this attribute properly. All is not lost because we can add a couple of additional stylesheet commands inside of an IE conditional to add the equivalent support to IE6.

While you would normally place the stylesheet code in external stylesheet files I will put the code inside of style tags so that you can more easily see how this works. Here's what we need to fix the h1 in the top left corner of the screen.

<style>
body{padding:5em 0 0 0;}
h1{position:fixed; top:0; left:0;}
</style>
<!--[if lt IE 7]>
<style>
h1{position:absolute;
top:expression(eval(document.documentElement.scrollTop));
left:expression(eval(document.documentElement.scrollLeft));
}
</style>
<![endif]-->

If we want to offset the position of the fixed element so that it is not right in the top left corner we add to the top and left values to do so. Let's say we want to move 100 pixels from the left and 50 pixels from the top. We need to update both places to get this working in all browsers.

<style>
body{padding:5em 0 0 0;}
h1{position:fixed; top:50px; left:100px;}
</style>
<!--[if lt IE 7]>
<style>
h1{position:absolute;
top:expression(eval(document.documentElement.scrollTop+50));
left:expression(eval(document.documentElement.scrollLeft+100));
}
</style>
<![endif]-->

We can also position the fixed element relative to the bottom right corner by substituting bottom and right for the top and left references.

Note that the code shown assumes that you are using IE6 with a strict doctype so as to put the browser into standards compliant mode and to use the documentElement properties to hold the scroll position. If you don't have a doctype or are using a transitional doctype you will need to use body instead of documentElement everywhere it is referenced.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate