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.
精彩评论