PDA

View Full Version : Resolved [updated] IE6 box expanding beyond set height



etabetapi
Sep 7th, 2008, 06:44 PM
Hi there. My problem is this: I have a div which I have set a height of 48px. Inside the div is a swf file that is 209px in height. I have set overflow: visible, because I want the content to be seen but not resize the box. In Firefox 2/3, and in Opera 9, I have no issues, but IE6 (and possibly other IE versions) the box expands to fit the content knocking my whole layout out of whack. How can I stop the box from expanding while still leaving the overhanging content visible?

A live example can be seen here: http://www.etabetapi.net/shapes/index.html

The div you're looking for is called menu. Here is a simplified code snippet:


<div id="menu" style="height: 48px; overflow: visible; margin: 10px 0px 10px 0px;">
<object
type="application/x-shockwave-flash" data="media/menu.swf"
width="903" height="209">
<param name="wmode" value="transparent" />
<param name="movie" value="media/menu.swf" />
</object>
</div>


Note: The real code has some extra stuff in it (a conditional comment using the embed for IE) but this is essentially it.

etabetapi
Sep 8th, 2008, 02:58 AM
While searching for a solution I found this:
http://www.positioniseverything.net/explorer/expandingboxbug.html

Which basically explains my bug. IE doesn't properly use the overflow property and instead of letting content render outside the box, causes the box to expand despite the explicitly set height. The article says there is no solution for this, but this is the mighty internet, so somebody must surely have found a work-around... If anyone has a suggestion for a way to make this work it would be much appreciated!

rmedek
Sep 8th, 2008, 06:23 AM
Just curious, why does the Flash movie need to be contained in the smaller div? I think for your layout to work cross-browser (and if you're going to keep the menu in Flash) I'd just leave space for the menu and position the Flash absolutely (essentially layering it "over" the rest of the site) so you don't have to hack the overflow issues.

etabetapi
Sep 8th, 2008, 06:49 AM
Just curious, why does the Flash movie need to be contained in the smaller div? I think for your layout to work cross-browser (and if you're going to keep the menu in Flash) I'd just leave space for the menu and position the Flash absolutely (essentially layering it "over" the rest of the site) so you don't have to hack the overflow issues.


I honestly thought it was more logical that way, I didn't know about the IE problem so I thought overflow would work. I am not real comfortable with using absolute positioning yet, which I guess is why I didn't think of this. I've read a lot about how it's hard to deal with, since each browser renders absolute positioning differently, so I've avoided using it. It sounds like a good solution to this problem though... I will have to try it out.

And yes I hate Flash, but I'm not fluent enough in JS to know how to build a menu like this from scratch. I hate "black box" solutions so I refuse to use an automatic generator for anything, lol.

rmedek
Sep 8th, 2008, 07:13 AM
I am not real comfortable with using absolute positioning yet, which I guess is why I didn't think of this. I've read a lot about how it's hard to deal with, since each browser renders absolute positioning differently, so I've avoided using it.

Absolute positioning can be very helpful. You have a fixed width design and a fixed header height, so you can make your wrapper position:relative and use that as the base for positioning elements within it (namely, the Flash menu).

etabetapi
Sep 8th, 2008, 09:47 AM
This worked and now the issue is resolved! Thanks a lot.

rmedek
Sep 8th, 2008, 09:54 AM
no prob :thumbsup: