(yet another) IE layout problem

[ballboy]

Hi,

Once again i turn to the creative minds of this forum to get me out of yet another mess caused by the ever so crap IE browser.

In this example i have 3 divs each 150px high. I'd like a 200x200px image to float over an area that overlaps the 2 top divs. as you can see in the example FF understands the little im asking for and gives me just what i want. But IE decides to add an extra 50 pixels to the first div.
I can't split the image to 2 and position the parts separately. Can anyone think of a solution?

Thanks.

Code:

<div>
	<div style="height:140px;background:#FFF000;">
	Div 1
		<div style="position:relative; top:20px; left:40px; z-index:2;">
		<img src="face.jpg">
		</div>
	</div>

	<div style="height:140px;background:#F00000;">
	Div 2
	</div>

	<div style="height:140px;background:#F0AA00;">
	Div 3
	</div>

</div>

IE:

FF.gif

FF:

IE.gif

until images are approved here imageshack copies:

IE

http://img108.imageshack.us/my.php?image=iehh7.gif

FF

http://img108.imageshack.us/my.php?image=ffzl6.gif

[Kravvitz]

Try using absolute positioning.

I suggest you read about Internet Explorer and the Expanding Box Problem.

[Paul O'B]

Hi,

As Kravvitz already said you could use absolute positioning to get that effect. Just set position:relative on the parent div and change the inner to absolute.

e.g.

    <div style="height:140px;background:#FFF000;position:relative"> Div 1
        <div style="position:absolute;etc.........

Of course you will have to make allowances if you have other content in there as the absolute element is removed from the flow.