Space on top of content in Firefox

If you visit this page in Firefox 3.6:

开发者_C百科

http://unirazz.com/images/ww/home.html

There is a space of around 10px above the content.

What's causing this extra space on top?

---

I played around with it and I was able to eliminate a bit of the space by turning off the rule margin: 10px 0; for the "footer" class... of all things. (I am deeply confused by this.)

---

the problem is with this line:

<div class="clear"></div>

inside the div.header

the clear:both in it's css makes the problem.

delete this tag and instead use the clearfix

like this:

add a class clearfix to div.header:

<div class="header clearfix">

then add these lines to your css:

.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

please note the second line carefully: content: "";

---

Firefox gets confused with margin on the page. You can fix it using:

div.content {
   padding: 1px 30px;
}

---

I could also be an overlapped div that's pushing the content div down. In my situation constraining the upper div to a specific height resolved it.