Member Avatar for Seregwethrin

Straight one:

Everything is fine. But if you comment or remove TopMenuBar's CSS Border attribute, than there's a space at the top which is here: (Check with Firefox 3.6, latest one)

Which also works fine in IE and Chrome. I feel so angry because I just gave my more than 3 hours without even drinking water to fix the problem. And the problem is a illogical stupid firefox issue.

Sorry for the language, really feel angry...

Edited by Seregwethrin because: n/a
  • 2 Contributors
  • 2 Replies
  • 130 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Seregwethrin

Dani AI

Generated

This is the classic CSS “parent not containing its children / margin collapse” situation rather than a browser-specific rendering bug. ’s experiment (border present → no gap, border removed → gap) is the telltale sign: a border or padding on a parent prevents the first child’s top margin from collapsing through the parent, so removing it makes the child’s margin appear outside the parent.

Why it happens: when a block-level parent has no border, padding, inline content, or established block formatting context (BFC), the top margin of its first child can collapse with the parent’s margin. The parent can also collapse to zero height if it only contains floated children. Different engines can expose the symptom differently, but the underlying CSS rules explain the behavior.

Practical, non-destructive fixes that avoid changing layout noticeably:

/* 1) Small padding to stop margin collapse */
#TopMenuBar { padding-top: 1px; }

/* 2) Clearfix so the parent contains floated children */
#TopMenuBar::after {
  content: "";
  display: table;
  clear: both;
}

/* 3) Make the parent establish its own formatting context */
#TopMenuBar { display: table; }   /* or display: inline-block; */

Each of the above prevents the margin from “escaping” the parent without needing to give a hard height.

Quick diagnostics: inspect the computed styles in devtools to see the child’s top margin and whether the parent has any height; temporarily outline the parent to confirm whether it collapses. For authoritative reading, see the CSS spec on collapsing margins and MDN’s guide to block formatting contexts: CSS2.1 spec: Collapsing margins and MDN: Block formatting context.

Recommended Answers

All 2 Replies

Member Avatar for drjohn

It appears to be related to the lack of any height info, not necessarily just the border. A border means it has some physical height attached to it.
Adding height:1%; or min-height:10px; or something similar gets you back to the first page's layout.

If you cut out the entire declaration for #TopMenuBar it also goes wrong.

So it is possibly a case of a totally empty declaration being assigned a default padding or margin to give it some size.

overflow:hidden; for #TopMenuBar also cures it.

total time to notice overflow:hidden; cured it - ten minutes.

Edited by drjohn because: n/a
Member Avatar for Seregwethrin

They just don't try to make their rendering engines more stable. With Chrome they are always trying to be faster, but stability should come first.

Also you have written that it took 10 minutes. Think it as a whole completed design with nested divs and other elements. It was frustrating to find out where is the problem...

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.