Wolfgang Fellger | How to make IE support position:fixed;

How to make IE support position:fixed;

Now, this article might seem a little outdated, as IE 7, introduced in Spring 2007, finally supported this long-missing feature. However, there is still a great number of IE 6- browsers out there, especially in corporate environments.

position:fixed; positions a certain HTML element relative to the browser's viewport, rather than the parent element. This means the element will not move when the document is scrolled. Although this property is supported even in ancient versions of Opera and Mozilla (not even to mention Firefox or Safari), it ain't in IE 5/6.

Fighting proprietary software with its own weapons

One has to admit that some Microsoft engineers recognized the situation and provided web developers with a solution, or at least an approach, to the problem: Conditional comments. In short, conditional comments are 'special' comments whose contents IE browsers will read and evaluate, but all other browser won't. As you can even limit this to specific version of IE, it's a great way of giving IE the special treatment it needs.

So, we can give any kind of special code to IE exclusively without breaking the validity of the document, but how does this help us in using a feature that IE does not support? The solution: we implement it ourselves.

The expression() function

IE supports another proprietary enhancement to the CSS standard: The "expression()" function. This allows one to execute arbitrary JavaScript code within CSS properties. Though this might be a disgusting idea to accessibility evangelists, it's a powerful tool to extend IE's rendering engine for functions it should have in the first place.

Unfortunately, using this has a drawback: It only works when IE is in quirks mode. How to trigger IE to quirks mode without harming other browsers? Fortunately, IE triggers quirks mode earlier than other browsers. A simple comment before the doctype declaration suffices. As far as I could test, this little stunt doesn't impress other browsers, so they stay in standards compliant mode.

Triggering quirks mode also means that IE 7 loses most of it's improvements and will behave like IE 6. If you're using conditional comments instead of CSS hacks, adapting to this situation should be a simple change from <!--[IF IE lt 7]> to <!--[IF IE]>. Just be aware of it.

How to put it together

I've created an example document demonstrating this technique. The box in the lower left will stay there no matter how you scroll. To demonstrate when conditional comments apply, it has a blue border in IE and a red border in everything else.

Test document