Weird div overflow problem with borders on IE6

[TazmanianD]

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

 

[rf]

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>

 

[Jukka K. Korpela]

Scripsit TazmanianD:

Can someone explain to me why in the following fragment on IE6, "Outer
1" gets a yellow background?

It happens on IE 7, too, both in Quirks and in Standards mode.

It appears that the size of the outer
div is being calculated incorrectly and it is overlapping content
following it.

Perhaps. But the following seems to fix the problem in Standards mode on IE
7:

div { overflow: hidden; }

Of course, such a setting is risky in general: it may hide actual content
from users.

This looks like it's just a bug in IE6.

Yes. But for the best workaround, I think we need to know the _real_ page.
After all, you're surely not using nested DIVs just for the sake of nesting.
Maybe there's a way to avoid the nesting that triggers the bug.