How to make position:fixed work in IE?

Question

I'm creating a uservoice-like widget where I want a clickable image to position at the bottom-right of the page. I got it working in Safari and Firefox but IE (at least the one I use IE7/XP) doesn't obey position: fixed.

Here's a portion of the embedded widget affected by the position issue:

<a href="http://propsify.ca/b/10" id="props-action">
    <img src="http://propsify.ca/system/badges/10-120x.jpg"/>
</a>

Here's the the css:

#props-action {
  text-decoration: none;
    position:        fixed;
    bottom:          15px;
    right:           5px;
    height:          80px;
    width:           120px;
  z-index:         1001;
}

#props-action img {
  border: none;
}

You can see the widget in action here http://propsify.ca/embed/healthp2p.html

Accepted Answer

Tried your link in IE8 and the widget wasn't using position:fixed either, but then noticed that IE was rendering the page in quirks mode, which was similar to my problem here. Adding the below DOCTYPE got it fixed (in IE8 atleast):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hmmm, given that you have no control of the target pages, the only option then is to emulate position:fixed. It's one fugly hack though:

#props-action {
  position: absolute;
  top:      expression((-5 - document.getElementById('props-action').offsetHeight + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
  left:     expression((-5 - document.getElementById('props-action').offsetWidth + (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
  right:    auto;
  bottom:   auto;
}

body > #props-action {
  text-decoration: none;
  position:        fixed;
  bottom:          15px;
  right:           5px;
  height:          80px;
  width:           120px;
  z-index:         1001;
}

It would be better though if you could wrap #props-action in another container so you wouldn't have to assume it being a direct child of body:

<div id="props-wrapper">
  <a href="http://propsify.ca/b/10" id="props-action">
    ...
  </a>
</div>

#props-wrapper > #props-action {
  ...
}

Answer 2

Here's a snippet containing the use of expressions in CSS that Erol mentioned: CSS Position Fixed for IE6. It even mentions a fix for the jitter issue.

[Code copied]

/*Make position:fixed work in IE6!*/

.fixed-top    /* position fixed Top    */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0px;top:auto;}
.fixed-left   /* position fixed Left   */{position:fixed;right:auto;left:0px;}
.fixed-right  /* position fixed right  */{position:fixed;right:0px;left:auto;}

* html,* html body   /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top    /* IE6 position fixed Top        */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right  /* IE6 position fixed right      */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 position fixed Bottom     */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left   /* IE6 position fixed Left       */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

Answer 3

I also found a CSS/HTML solution described here: A Better Fixed Positioning for Internet Explorer 6

The author's demo is located here: Position Fixed

... this CSS and minimal extra HTML markup allows you to use both fixed positioning and absolute positioning without having to make a compromise in any browser. Simply put any elements that will used fixed positioning outside of the wrapper div and tell IE to position it absolutely. Any elements inside the wrapper div can be absolutely positioned normally.

He also mentions this solution's drawback:

There is one drawback to this method, and it relates to the scrollbars in all browsers. Any elements with a fixed position touching very bottom or right of the page will sit above the browser's scrollbars. Apart from that, this works perfectly in all major browsers.

Here's this other article, though, that uses the same solution, but raises the idea of working around the aforementioned drawback by using conditional comments for IE. Read it here, and look for the link about conditional comments.

How to make position:fixed work in IE?

Follow this question

Related questions