IE6 and 7, weird margin 'inheritance'

Question

I know about the double margin bug, but this is different.. the scenario is having an element with a bottom margin, then directly below it an element that contains floating elements (which are cleared at the end), the container element could have say a bottom border that should sit just under the floating elements it contains.. however ie IE7 and 6, the bottom border is spaced away from its contents, by the exact same amount of the bottom margin of the element above it..

It's not really inheritance, more that a margin is applied twice and in a wrong position.. here's some repo code:

<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;">
    <div style="float: left;">Hello world?</div>
    <div style="clear: left;"></div>
</div>

Stick that in a complaint page (I used xhtml transitional), you'll notice the border doesn't appear under the text, but 50px away from it... the same distance that 'Menu' is spaced away from the text..

Test this against say.. IE8, and the border is correctly sat just under the text.

This is something I've noticed previously and managed to ignore and work around, but I'm wondering if this bug is named, and if there is a good way to get around it..

(the way I would usually get around this is to space H1 with padding instead, but this isn't always reasonable).

Answer 1

You need to invoke hasLayout on the outer div to have IE display properly. You can do that by adding width or height to your div or zoom:1.

Those will also clear your float in IE so you can remove <div style="clear: left;"></div>. To clear the float in other browsers use overflow:hidden;

<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;overflow:hidden;zoom:1;">
    <div style="float: left;">Hello world?</div>
</div>