Making CSS position:fixed work on IE6

Submitted by admin on Sat, 20/03/2010 - 02:23

Unfortunately, the site also had to support IE6. As you know CSS position:fixed is not supported in IE6. So how the hell can we bend IE6 into rendering it the same as all other web browsers. After hours of trying out combination of some CSS tricky, it still wouldn't work.

It was only when i came over this site: http://www.howtocreate.co.uk/fixedPosition.html and damn everything was resolved. If you are in a hurry and can't be bothered to read through the excellent article, here's how you do it.

What i needed was to place the feedback image to the far left of the page and make it stay within that position no matter how small or wide the screen will be (it will always stick to the far left of the web browser screen). The CSS class used here was .feedback {}

Simply create a file called ie.css and add this conditional statement to specifically target IE6:

And in the ie.css file add:


div.feedback { 
	_position:absolute;
	_left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	_top: expression( ( 270 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

Note: Where you see number 0 and 270, these numbers can be changed to suit where you want to position your element, starting from the top left corner of your page. In this example, i gave it left:0 and top:270px. Also, each properties has an underline before it, this is to only target IE6 and ignored by IE7 since the conditional statement applies to IE7 as well. This is fine as IE7 supports position:fixed