Could someone explain this position:etc for me better?

[Stomme poes]

O bikkhus,

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);
width: 100%;
float: left;
etc...

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:

http://stommepoes.nl/Guis/guis.css

IE6 stuff are at the top.
Page: http://stommepoes.nl/Guis/guis.html

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?

[AutisticCuckoo]

A floated element can be relatively positioned. That's the key feature (along with negative margins) in the holy grail of CSS layouts: the multi-column layout with arbitrary source order and a full-width footer. IE5/Mac doesn't support relative positioning on floats, though.

Using position:absolute or position:fixed will make the computed value of float be none, i.e., a floated element cannot be absolutely positioned. (Fixed positioning is a special case of absolute positioning.)

[Dan Schulz]

Who cares about Mac-IE anyway? It's a dead browser, like Netscape 4 (ok, now the entire Netscape line ).

[AutisticCuckoo]

Who cares about Mac-IE anyway?

Those who use IE5/Mac, presumably? And those who care about universal access and not creating unnecessary barriers? Perhaps those who don't think a designer has any right to dictate which browsers users should have?

It's a dead browser, like Netscape 4

So is IE6/Win. It's not being improved. Are you saying we should stop doing workarounds for IE6?

IE5/Mac has its bugs and quirks, but on the whole I think it's on par with IE6/Win. I usually have fewer problems with my layouts in IE5/Mac than I do in IE6/Win.

[Dan Schulz]

5 years, Tommy. 5 years. The only reason why I still support IE 5.5 and 6 on Windows is because I have to (and there's still a significant percentage of people using them, even if 5.5 is dropping like a hat).