FAQ: IE 5 & 6 on Windows?

If you look at this page with Microsoft Internet Explorer 5 or 6 on Windows ("WinIE5" and "WinIE6"), you'll notice that it doesn't work. At least not with the current versions as of Sept 2002. Many people ask me about that, so here is bit of explanation. In brief: the bug is in the browser, not in this page.

WinIE5 and WinIE6 don't implement 'fixed' yet. That is unfortunate, but the bigger problem is that they also don't parse the 'position' property correctly. A browser that doesn't know 'fixed' should throw away the rule 'position: fixed' and fall back to whatever the previous value of 'position' in the style sheet was. We could then add 'position: absolute' just before the 'fixed' and the browser would use that. But in WinIE 5 and 6 that is not what happens. Apparently the keyword 'fixed' is somehow interpreted as 'static'.

You cannot make WinIE5 and 6 support 'fixed', but there is a work-around for the parsing problem. Johannes Koch alerted me to this trick (from his collection of work-arounds). First replace the 'position: fixed' in the style rules above by 'position: absolute' and then insert the following rule a little lower in the style sheet:

    body>div.banner {position: fixed}

(If the DIV.banner is inside another element than BODY, replace BODY by that element.) The effect of this is that browsers that know about the '>' (child) selector of CSS will use this rule, but browsers that don't, in particular WinIE5 and WinIE6, will ignore it. The rule 'position: absolute' will be used instead and the menu will be in the right place, except that it will not stay fixed when you scroll.

It is important that there are no spaces around the '>'.