White Space On Top Of Page (Firefox Specific)

I'm getting a big whitespace on top of my page only in firefox. I tried to inspect all elements and can't find anything wrong with it. I also checked for uncollapsing margin but ca

Solution 1:

This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height/padding/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element.

Any fix that would ordinarily prevent margin collapse will stop this behavior. For example, setting hr.clear { height: 1px } pushes everything back up, but it also shifts things down a pixel, which is undesirable. An interesting fix is to set header { padding-top: .001em }. This won't add enough padding to actually shift things visually, but it counts enough to prevent the margin from collapsing beyond the boundaries of header.

Alternatively, you could just rewrite your code to avoid this structure.

Solution 2:

Just change the position property in the #logo class of your css, set it to:

position: relative, the class would look like:

#logo {
    background: url("/Content/images/sprite.png") repeat-x scroll left top transparent;
    display: block;
    height: 85px;
    position: relative;
    text-indent: -9999px;
    top: -20px;
    width: 180px;
}

after that you need to change the header nav class, (margin was 90px on top)

header nav {
    margin: 40px 0 5px;
    padding: 0;
    text-align: center;
}

Then just need to adapt it exactly the way you need it, it will look like this on firefox:

Solution 3:

It's very bizarre. I guess the easiest and best way would be, like animuson said, to remove <hr class="clear"> under <div id="contact-toggler-wrapper"> . It did the trick without affecting the layout.