Friday 7th August 2009

Internet Explorer 8: Top margin missing from first element after floated elements and clearing <div>

We're not really sure what IE8 thinks it is doing here. What we can say for certain is that IE6, IE7, Firefox, and Safari all render our test markup as we would expect it to be rendered. IE8 is the only browser which gets the rendering wrong.

What we have is:

In IE, the top margin on the final div is missing. In all other browsers we have tested (including IE6 and IE7), it is displayed correctly.

Here's the code:

<div style="width: 400px;">
    <div style="float: left; background: #CCCCFF; width: 150px; height: 100px; display: block;">
        Left Floated &lt;div&gt;
    <div style="float: right; background: #CCFFCC; width: 150px; height: 100px; display: block;">
        Right Floated &lt;div&gt;
    <div style="clear: both;"></div>
    <div style="background: #00FFFF; margin: 10px 0 0 0; height: 200px; width: 400px">
        &lt;div&gt; with margin: 10px 0 0 0;

In Firefox, IE6 and IE7, we'll see something like this:

In IE8, we'll see this:

Where's the top margin gone?

We don't know. What we do know, is that any of the following changes will make the margin re-appear:

Good luck out there, folks. It looks like IE8 is going to be another headache for HTML developers.


Thanks should go to buti-oxa on the forums, who has pointed out that what IE8 is doing here is collapsing the margin into the containing <div>. This would explain why the top margin re-appears where expected when the containing div is removed.

Whilst there might be a question as to whether IE8 is in the right here, we would argue that this requires IE to ignore the 3 preceeding <div>s including the clearing <div>, and behave as if the final <div> were the first-child of the containing <div> - this doesn't seem like the right way to render this markup, but it seems pretty clear that this is what IE8 is doing.

“ From the outset, invent Partners got the balance right and were prepared to listen to our needs, whilst at the same time offering their depth of knowledge and experience. The end product we received is exceptional and has since proven its worth, fundamentally from a ‘back end’ input and management information viewpoint and importantly from a ‘front end’ consumer ease of use stance. Needless to say, we are growing our business as a result, with 80% of web business as ‘net new’. ”
Ged, Vertigrow Ltd

Contact Us

© 2024 Invent Partners Ltd | Supporters of FdA Web Design, Wakefield