Fixing position:fixed for Windows Internet Explorer
Tagsoup · Web Development
position:fixed for Internet Explorer
Status quo (2006-09-26): Internet Explorer 7 applies its numerous CSS changes – including support for fixed positioning – only in ‘standards-compliant mode’. Both methods described below should still be ‘safe’ to use (albeit for different reasons). More info about new possibilities and consequences in terms of doctype-sniffing will be added soon.
IE >= 5
The reason that the initial approach does not work in versions prior to 6 is lacking CSS support for the root element. There is, however, a trivial workaround: create a dummy element that serves as the document body and move the relevant properties one node down.
Absolutely positioned elements outside of
div.content will be fixed in respect to the viewport, absolutely positioned elements inside of
div.content will behave normally. This works in version 5.0 and higher of IE on windows and is the most stable solution available.
This makes it mandatory to trigger quirks mode for IE >= 6, e.g. by inserting a comment (accurately: comment declaration; see also: other prolog) before the document type declaration. It could be avoided with some additional code overhead, with no advantage but a couple of general bonus bugs in return.
Complete cruft-free demos:
- fixed left bar
- fixed top bar
- fixed right bar
- fixed bottom bar
- fixed top and left bar
No user agent but Windows Internet Explorer must be exposed to any of the CSS rules relevant to the hack; I strongly recommend using conditional comments instead of exploiting parsing bugs to accomplish that.
Some older user agents that support
position:fixed cannot handle it very well, e.g. IE 5/Mac. For maximum bugwards compatibility you should consider to
@import the offending rule sets and wrap them in an
@media screen block – the latter also serves an important semantic function, and the media type screen should be explicitly specified for the IE/Windows style sheet as well:
<style type='text/css'>@import 'all.css';</style>
@import in a
style element to basically link a style sheet is somewhat ugly but compact; blindly spawning http connections with multiple linked, imported and conditional style sheets is not a good idea, especially since user agents commonly request all files associated with a document, regardless of whether or not they actually support the corresponding MIME or media types.
IE >= 6
Internet Explorer >= 6 supports CSS for the root element in ‘standards-compliant mode’. Moving the scroll mechanism from the root element to the document body will cause absolutely positioned descendants of the
body element to be fixed in respect to the viewport.
* html body
There are a couple of disadvantages involved:
- in order to work, it requires IE >= 6 to be in standards-compliant mode (know your oxymorons); authors have not got the last word on that because client side ad blockers, security manglers and the likes can incidentally trigger quirks mode by local modification of the document source
- it makes it impossible to use
position:absolute in its intended way
- in a complex setup the scrollbars could get partly hidden or completely inaccessible; this technique should only be applied for simple fixed boxes, preferably using
overflow-y instead of
On the upside,
- it does not require redundant markup in the related document instance (you could, for example, not even have write permissions, or simply care about ‘clean’ markup).
- it leaves the initial document focus for mouse wheel or keyboard scrolling in tact.
Complete cruft-free demo:
- fixed box for IE 6
A short time later, this became quite popular in the course of an
mxvision feature. Since the interest flux did not drop, I added some improvements in terms of stability, and finally support for IE 5 – but not before having witnessed that the enemy does not sleep either (you may take that literally, as this helpful answer on a request for clues reveals – and it should sufficiently explain what a hack attack really is :-).
Thanks for contributions, head-ups and inspiration to ‘Warden Dave’, Tim Rivera, Richard Hulse, Marcin Sokolowski, Barbara de Zoete and especially everybody I forgot to mention.
firstname.lastname@example.org 2013 Tagsoup