Posted by rf on 06/01/07 06:53

"TazmanianD" <damon.lundin@gmail.com> wrote in message
news:1180674110.904209.223920@g4g2000hsf.googlegroups.com...
> Can someone explain to me why in the following fragment on IE6, "Outer
> 1" gets a yellow background? It appears that the size of the outer
> div is being calculated incorrectly and it is overlapping content
> following it. If you remove the border from the inner div or if you
> remove the middle div, then the background gets rendered properly.
> This looks like it's just a bug in IE6. It gets rendered properly on
> Firefox. Does anyone know a good way to work around this. If I stick
> a 1px border on the outer div, then the background renders properly
> but I'd rather not have to do that.
>
> <DIV style="background-color: yellow">
> <DIV>
> <DIV style="border: solid">
> Inner 1
> </DIV>
> </DIV>
> </DIV>
> Outer 1<BR/>
> Outer 2

Bug.

Same with IE7.

IE is very confused with many background/border combinations.

What's wrong with
<div style="border: solid; background-color: yellow"> ?
Inner1
</div>

--
Richard.

[Back to original message]