Straight one: http://neecto.com/wtf/1.htm
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: http://neecto.com/wtf/2.htm (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...
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.
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...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.