Member Avatar for solid28

Hey Everyone,

If you go to with firefox, there is a space between the top of the browser and the top border I put there.

I explicitly set the top margin of the header div to zero, so I am quite confused.

I do not see this space/margin/padding in chrome or IE.

Thanks for the help!

~Evan

  • 2 Contributors
  • 2 Replies
  • 102 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by solid28

Dani AI

Generated

A quick, practical checklist for (and thanks to for the cross-browser tip): unexplained top gaps are almost always caused by user-agent defaults or margin-collapsing of the first child inside body. The CSS spec explains how adjacent vertical margins can collapse and produce that visual gap; treating the body/first-child relationship is the usual cure (W3C: collapsing margins).

Try these fixes in this order (safe, easy, reversible):

/* reset UA margins */
html, body {
  margin: 0;
  padding: 0;
}

/* ensure the header itself has no top margin */
header, .site-header {
  margin-top: 0;
}

/* if margin collapse still occurs, create a new block formatting context */
.wrapper {
  overflow: auto; /* or overflow:hidden; use carefully */
}

Also verify these items that commonly cause browser-only differences: a missing/incorrect DOCTYPE (use <!DOCTYPE html>), browser extensions or zoom level, and whether any element above the header has position/transform rules. Use Firefox Developer Tools to inspect the computed box model and see which rule is contributing to the gap.

For consistent cross-browser defaults consider a small normalize/reset (for example normalize.css). Quirks/standards mode differences are documented on MDN and are worth a quick check if the page is old (MDN: Quirks Mode and Standards Mode).

These steps fix the vast majority of “random” top margins in Firefox while keeping layout stable in Chrome and IE.

Recommended Answers

All 2 Replies

Member Avatar for Dandello

Um, looking in with Firefox, I don't see any top margin issues - that border is sitting right at the top and centered. However, in MSIE 8, the content is on the left and there's a fairly good sized margin between your bottom border and the bottom edge of the browser window.

Member Avatar for solid28

Um, looking in with Firefox, I don't see any top margin issues - that border is sitting right at the top and centered. However, in MSIE 8, the content is on the left and there's a fairly good sized margin between your bottom border and the bottom edge of the browser window.

Thanks so much for the response...I will have to fix the IE issues.

Thanks a ton ^_^

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.