Firefox: Space on top of content

Question

If you visit the page in Firefox 3.6 http://unirazz.com/images/ww/home.html

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

Whats causing this extra space on top?? any solution?

thanks

Answer 1

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.)

Answer 2

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: "";

Answer 3

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

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