Home > Web > Fixing IE: CSS fixed position

Fixing IE: CSS fixed position

I will start a series of articles about how you can fix some IE bugs. We all agree that IE is very buggy, but instead of whining, let’s see what we can do about it. So I will present you the problem, the fix, explain the fix and how you can EASILY INTEGRATE it.

Before, I will explain you a few things that I will use in these fixes. There are few different things in IE when it comes to CSS.

If you prefix a CSS property with _, IE will still recognize it. If you think this can be very useful. You can specify values for CSS properties only for IE. Let’s take an example.

color: green;
_color: red;

The font color will be green in all the browsers, except IE, where it will be red.
Instead of _, you can also use *, + and some other special signs.

The CSS value supports in IE a special value: expression([expr]). The [expr] is a JavaScript expression, which is evaluated and the CSS value is assigned to it. Again an example:

_height: expression((1 + 1) + 'px');

The CSS height in the above example is actually 2 pixels in IE. In the expression we can even use this to refer to the element for which the CSS value is applied.

Now let’s get back to the current issue. If you specify the fixed value for the position property, the element should be absolutely positioned, but relatively to the viewport, instead of the document. For more detailed info, please see the CSS specification. Not surprisingly, this works in most of the browsers, except IE.
And now, the fix. Which is actually very simple. We will use absolute positioning but we will calculate the coordinates dynamically relative to the viewport.
So the CSS code

position: fixed;
top: 10px;
left: 20px;

will have the following IE equivalent

_position: absolute;
_top: expression(((ignoreMe
= document.documentElement.scrollTop
? document.documentElement.scrollTop
: document.body.scrollTop ) + 10) + 'px' );
_left: expression(((ignoreMe
= document.documentElement.scrollLeft
? document.documentElement.scrollLeft
: document.body.scrollLeft ) + 20) + 'px' );

Don’t remove the ignoreMe variable as this will force the expression to be evaluated not only the first time the page is loaded, but always.

In the end, a live example. And if you complain that in Mozilla the things are smoother, then simply switch to Mozilla :).

Categories: Web Tags: , , ,
  1. August 28, 2009 at 4:15 pm

    Thank you! Looks like IE8 is good about its position:fixed.. except when it is in a frame, then it is broken again. Your fix let me hack around it to give consistency between browsers.

  1. November 4, 2010 at 2:15 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: