This is my second post for this site! uggh.
Anyway, I have several boxes absolute positioned in the container #all, which serves as a wrap for the entire site. Works great and validates in Firefox, opera, safari, ie 5 & 7. But IE6 is killing me.
Here's the deal, for some reason the absolute positioned boxes are not showing up at all. I was able to figure out that this had to do with #all not having a height set - or at least they do appear when I set a height for it. Unfortunately, if I set a height it creates a scroll bar instead of expanding because #all is also set to overflow:auto to allow it to expand with floated content inside of it.
Here's the site:
It looks like it should in Firefox, Safari, etc. But in IE6... nothing.
I've also posted it with a height set to show the problem that creates:
Can anyone tell me why my absolute boxes are disappearing in IE6. They don't anywhere else, and I'd rather avoid specifying a height if I could.
Thanks in advance,
It's the float on #left
It's the float on #left that's causing the problem in IE6 (dunno why though).
Re:float on #left
So I used conditional comments to change the #left float to be relative positioned, even did that to #main, which floats around it, but no dice. The absolute positioned boxes are not visible.
(subsequently changed it back)
Still, the only time they become visible is when I define a height for #all (the site wrap), but I want it to expand not have a set height.
I then tried reassigning overflow:visible to ie6, which incorrectly treats visible like the default. Strangely, that causes my absolute boxes to disappear again even with the height defined.
Thanks for your efforts... I'll let you know if I find anything more.
Finally, found the solution:
*IE6 will not allow you to absolute position a box within a container when the only other content is comprised of floats.
Why? Beats me.
For me that means the last float #right needed clear:both. Then everything falls into place.
Funily enough came up
Funily enough came up recently in a post with some images in a footer, didn't make the connection, sorry.
fwiw for some strange reason clear:both on the absolute positioned element worked, shouldn't though :shrug: or as iirc Chris pointed out a simple clearing element such as an hr transparent tag to clear things.
Thanks guys, hard lesson learned. But I definitely won't forget this one.