Why does IE7 when clearing a float result in a margin bug?

Question

I have a very simple HTML page (validates as XHTML 1.0 Strict):

<div class="news-result">
    <h2><a href="#">Title</a></h2><span class="date">(1-1-2009)</span>
    <p>Some text...</p>
</div>

with the following CSS:

.news-result {
    overflow: hidden;
    padding: 30px 0 20px;
}

.news-result h2 {
    float: left;
    margin: 0 10px 0 0;
}

.news-result span.date {
    margin: 1px 0 0;
    float : left;
}

.news-result p {
    padding: 3px 0 0 0;
    clear: left;
}

Rendering this page in IE6 or FF3 render perfectly (the title and the date on a single line, followed by the paragraph). In IE7 however, there is a large space between the title and date, and the paragraph.

We have a simple reset that clears every margin and padding on every element.

Dropping the float on the date element fixes this problem, as does setting zoom: 1 on the paragraph or removing overflow: hidden on the container, but all are not ideal. Why does a float followed by a paragraph trigger this additional top margin, only on IE7?

Answer 1

I'm seeing the extra whitespace in IE6, 7 and 8B2.

It appears that IE has a non-zero top-margin applied to the <p> tag.

I was able to remove the whitespace in IE by making the following change:

.news-result p {
    margin-top: 0;
    padding: 3px 0 0 0;
    clear: left;
}

The change did not seem to have any negative side-effects in Firefox 2 or 3, Opera 9.63 or Safari for Windows 3.2.1.

Answer 2

Can I assume that you have a doc-type?

However, change the h2 and span to display: inline; should also clear up your issue.

Edit --- adding hasLayout

Understanding that inline isn't always an option, here's an article explaining what's going on.

Essentially you have to give the <p> hasLayout. There are many ways to do this, and I don't like using <div class="clearall"></div> and prefer to use overflow: hidden; or zoom: 1;

Answer 3

Because IE7 is still float bugged, I'm afraid.

(fixes at the links)