Why does IE7 cause margin error when clearing float?
I have a very simple HTML page (validated 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;
}
The rendering of this page in IE6 or FF3 is fine (title and date on one line followed by a paragraph). However, in IE7, there is a lot of space between the title and the date and the paragraph.
We have a simple reset that clears every margin and padding for every item.
Dropping the float on the date element fixes this problem, as does setting zoom: 1
in a paragraph or deleting overflow: hidden
in a container, but they are not perfect. Why does a float followed by a paragraph trigger that extra top margin, only on IE7?
source to share
Can we assume you have a document type?
However, change h2 and span to display: inline; should also clear up your problem.
Edit --- adding hasLayout
Understanding that inline isn't always an option, here's an article explaining what's going on .
Essentially, you must provide a <p>
hasLayout. There are many ways to do this and I don't like to use <div class="clearall"></div>
and prefer to use overflow: hidden;
orzoom: 1;
source to share
I see extra spaces in IE6, 7 and 8B2.
It looks like IE has a non-zero top margin applied to the tag <p>
.
I was able to remove spaces in IE by making the following change:
.news-result p {
margin-top: 0;
padding: 3px 0 0 0;
clear: left;
}
The change did not have any negative side effects in Firefox 2 or 3, Opera 9.63, or Safari for Windows 3.2.1.
source to share