(This post is superceded by fixed positioning 2004.)
Last Saturday, me and Arthur were working on a solution for fixed positioning in IE5. We needed that for a costumer, 'cause they thought it would look good. I will not give my opinion now about fixed "frame based layouts" (you never know who is reading). We were aware of devnull solution, but we needed a fixed header and a fixed sidebar. There was a solution available, close to what we want: sidebar - header (that means that the sidebar is hits the top of the page). We wanted a header - sidebar effect.
After changing some things and formatting the CSS we created a nice looking "frame based layout" layout (I will show it when its finished). It worked in IE6, Mozilla, Opera 7.11 and IE5.5. This weekend I tested the thing in IE5. Dude, the page was unreadable! My first thought was: "To hell with bad browsers". My second was: "Let's get testing". So at Saturday, we created four test cases (all to do with fixed positioning):
NOTE: These pages used to look really ugly. The "layout" was done this morning.
So when we finished we did a lot of browser testing and Arthur wrote all the incompatibilities down. Anyone with a Max or Linux who wants to do some more testing? The browser results come later. Than we went to the "special IE5 PC" and you know what? All the damn tests failed! Yes that's true they failed. It took us another hour the figure out what was wrong. IE5 applies child selectors if they are nicely formatted:
body > div#foo{
position:fixed; /* IE5 applies this rule */
}
WOEI (Dutch expression) that sucked! We changed it to:
body>div#foo{
position:fixed; /* IE _doesn't_ apply this rule */
}
When we knew this it took me 5 seconds to let the client site work in IE5 again. I just needed to removed four damn spaces. Arthur and I would like to call this (Its probably already known): THE IE5 SPACE BUG.
The test results (all was tested on Windows XP):
fixed, but fully backwards compatible]
fixed, but fully backwards compatible]
fixed, but fully backwards compatible]
fixed, but fully backwards compatible]
Although fixed positioning can be found around the web, I think this is still a valuable resource, because we listed them all and we can warn you to not format CSS nicely.
FYI: all your tests work in Firebird 0.6 and Konqueror 3.1.2 on Linux. They fail (surprise!) in Netscape 4.7 (Linux again) where the "fixed" part is treated as whitespace. They work in Firebird 0.6.1 (just upgraded) with the added effect of the header in the last test covering the scrollbar as well!
It's me again, but don't shoot the messenger!
The spaces shouldn't be there in the first place. If I'm not mistaking, the CSS specs say that al selectors should be applied without spaces, can't find where at this moment, though.
Maybe nice to verify this, could keep you from getting in such problems in the future.
@Ben I know about Netscape 4, but I think my readers can come up with a method to hide the stylesheet ;)
@Bas Unfortunately you are mistaking:
http://imfo.ru/csstest/fixe... But I'm not tested this page. :)