5 replies [Last post]
Burwind
Burwind's picture
Offline
newbie
Virginia
Last seen: 12 years 23 weeks ago
Virginia
Joined: 2007-04-12
Posts: 6
Points: 0

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:
http://www.montpelierwinefestival.com

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:

http://www.montpelierwinefestival.com/index2.html

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,

Ben

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's the float on #left

It's the float on #left that's causing the problem in IE6 (dunno why though).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Burwind
Burwind's picture
Offline
newbie
Virginia
Last seen: 12 years 23 weeks ago
Virginia
Joined: 2007-04-12
Posts: 6
Points: 0

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.

Burwind
Burwind's picture
Offline
newbie
Virginia
Last seen: 12 years 23 weeks ago
Virginia
Joined: 2007-04-12
Posts: 6
Points: 0

Got it!!!

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Burwind
Burwind's picture
Offline
newbie
Virginia
Last seen: 12 years 23 weeks ago
Virginia
Joined: 2007-04-12
Posts: 6
Points: 0

Thanks

Thanks guys, hard lesson learned. But I definitely won't forget this one.

Ben