[Solved] White space on top of page (Firefox Specific) [closed]

Question

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.

Accepted Answer

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.