additions...

...web design...

CSS based 'position: fixed' in IE/win…

Internet Explorer 6 (and older versions) lack support for 'position: fixed'. I have already created a 'position: fixed' based on IE-expressions, but it is not a satisfactory solution in all cases.

Requests for a CSS-only and also mode-independent solution sent me on a new search across the web, and yes, the problem is at least partially solved, and the solution documented.

I have to admit that I don't see much need for such workarounds. What a browser can't do it can't do, and it is not up to the web designer to “fix” it. However, if someone wants to create crutches for lame browsers, then I'm not going to argue against it. Doing so may even be fun at times.

Note that this “CSS-only” solution breaks parts of the back-button functionality for in-page links in IE6, so there are certain document-types it simply doesn't work well for.

borrowed and fine-tuned solution…

I found Emulating Position: Fixed;, and after some thorough testing and clean-up I had the essential pieces in place.

Most workarounds for IE/win suffer from weaknesses, and this one is no exception. However, it's the only complete, CSS only, solution that even comes somewhat close, so I think I can live with one additional element in the source-code and the need for slight adjustments to other styles in some cases.

Copy, paste and forget doesn't work for a solution like this. If you can't tweak your layouts to make it fit, then you are well adviced not to include it. It will work with most layouts, but not unconditionally.

mode-independent and mostly un-restricted usage…

I wanted my solution to be mode-independent – both Quirks and Standard compliant mode, and I wanted to be able to add it to all kinds of layouts. Thus, I had to add that extra container-div to the source-code.

IE6 can do without extra elements when in Strict mode, but since no IE/win version recognizes the html-element when in Quirks mode, the additional element becomes a necessity.

basic source-code with IE fix:
<body>
  <div id="iefix">
 ...the entire page...
  </div>
...the “fixed” elements...
</body>
</html>

The div#iefix is left unstyled in all but IE/win, so it doesn't disturb anything or anyone – except for maybe the over-eager standardista. Can't be helped, I'm afraid.

element fixed anywhere…

I have fixed 3 elements, each containing a small image, to the viewport. The following styles will work as intended in all standard-compliant browsers.

uppermost fixed element:
div#fixme {
position: fixed; 
top: 10px; 
left: 73%;
z-index: 2;
}
lowermost fixed element:
div#fixme-bottom {
position: fixed; 
bottom:10px; 
left: 73%;
z-index: 2;
}
middle fixed element:
div#fixme-middle {
position: fixed; 
bottom: 50%; 
left: 73%;
z-index: 2;
}

There's nothing special or unusual about those styles, and IE will see them too. Since it is only 'position: fixed' IE6 doesn't understand, there's no reason to duplicate the rest of those declarations.

how to “fix” IE/win…

IE6 (and older IE5+/win versions) is styled to have the html and body elements dimensionally locked to the browser-window and has “lost” the scroll-bar. Thus, everything that is positioned absolutely in relation to body, will stay fixed.

IE/win gets the extra element, a div, in the source-code, just inside the body. I call it div#iefix. The scroll-bar is “transferred” onto div#iefix, and so the scrolling is restored.

So IE/win uses 'position: absolute' instead of 'position: fixed', and the fact is that nearly all browsers can do that if we want them to. I do prefer to use the proper 'position: fixed' for all browsers that understands it though, so only IE/win gets the following workaround.

what IE/win needs:
@media screen {

* html, 
* html body { 
overflow-y: hidden!important; 
height: 100%;
margin: 0;
padding: 0; 
}
* html #iefix { 
height: 100%;
overflow-y: scroll;
position: relative;
}

* html div#fixme, 
* html div#fixme-bottom, 
* html div#fixme-middle {
position: absolute;
}

}

These styles are placed after the ordinary styles, so IE/win picks them up in addition to – as replacement for – the ordinary styles.

Note: I don't want my IE-fix to disturb IE/Mac or IE7 in Strict mode. The @media rule keeps IE/Mac out, and the '* html' hack targets 5+/win, IE6, and IE7 in Quirks mode. This means that these styles will only be seen/applied by the IE/win versions that need them, so no need to hide them with conditional comments or by any other means.

Weak spot: the extra div: div#iefix can't handle a horizontal scroll-bar properly on a page like this. That's the reason why I have only hidden the vertical scroll-bar on html/body, so those elements (depending on mode) can handle horizontal scrolling if/when that's needed on narrow windows. Thus, nothing gets lost – it may just look a bit odd.

conclusion…

This is a pretty solid, simple and well-working solution. It may actually be the only solution that'll work in some cases.

This page; with its min/max simulations and pretty complex source-code and basic styles, pushes the 'position: fixed' simulation to its limits. I am therefore quite sure that this solution will work in most scenarios, but I'm also quite sure that it won't work in all scenarios.

There is one important limitation: if a layout is using a javascript or IE-expression based min/max simulations and IE6 is set to run in Standard compliant mode, then some values in that IE-expression must be changed to give space for the vertical scroll-bar, and it is difficult to make it all work smoothly in both modes.

One may also run into unsolvable problems with scripts that rely on calculating positions and element-sizes, as this CSS based 'position: fixed' simulation restricts everything to the size of the browser window – whatever that is.

Might as well use the IE-expression based 'position: fixed' simulations in such cases, since javascript and IE-expressions will run just fine together without any adjustments, as long as the usual care to prevent clashes between scripts/expressions are taken.

For your information: this page triggers Quirks mode in IE6, and everything is tuned for proper behavior in that mode.

sincerely  georg; sign

Hageland 21.aug.2006
last rev: 08.des.2007

additions...

some “fixes” are simpler than others, and some may even work — Georg

addition to:

internal resources…

external resources…

about…
…2006 - 2007


fix me #1
fix me #2
fix me #3