I was being silly and playing with a serious (work) site, and ran into something that seems weird. I'm probably doing something wrong yet it's working... involving deliberately setting position:static.
I was redoing this site which looks gawd-awful and was doing all these extra images and hacks for IE6 and thought, why not keep a living memory? The old site ONLY seems to look good in IE6 anyway, why not keep it?
So I took the site, and did the example from Egor Kloos using a CSS signature to set up CSS commands for RestOfWorld browsers while leaving everything else for IE6.
IE6 needed position: relative on the #wrapper to get the text to line up with the menu (now here's where I think I went wrong... this wasn't a haslayout thing as no other Haslayout triggers worked, yet I didn't set any coords... so I think I added the positioning blindly and it just worked and that's not really a good thing). The menu is really two menus and I made it look like one (there's a little menu in the header and another in another div).
Later, I changed the #wrapper for RestOfWorld to float: left so I could do the negative margins wrapping thing (which I couldn't seem to get to work in IE6 this time even though it's worked before). But, Safari and Firefox took the links within the negative-margin box and they were completely unhoverable and unclickable. IE7 and Opera were cool. So, after completely taking the page apart, it seemed that the position: relative was screwing things up.
Now I thought that float: left would completely override position: relative? But it doesn't? I "fixed" the problem by stating
position: static (to put it back where it was I guess);
I've never seen anyone set position:static on anything as it's a default. So, float's don't "override" position:relative, but actually use it as a starting point? I always thought this was a moot point or something just like setting display: block on a float was also pointless (a float being a block and all)...
It's prolly still a mess cause I'm still playing with it, but here's the CSS:
IE6 stuff are at the top.
Despite my attempt, I did still have to use the star hack because the position: absolute on the #sidebar also seemed to override the later float: left on that one as well... though maybe position: static first would have fixed that too. Question is, why?