I’ve got very weird problem in my current project. The #head div looks like has margin-top css setting enabled, while it is not. It only occurs on Firefox 9.0.1 (Mac), other browsers are ok.
Here’s link to the demo layout. Not sure if it happens in FF 9.0.1 Win version. However, IE7 renders it correctly. Refer to attached image to see how it renders. So, if you disable the margin-bottom:23px under the #head div in Firebug, you’l see it’ll move up, but why the heck!? It was the margin-BOTTOM setting we’ve disabled…
Is this me, or is this FF?
What’s happening here is that the bottom margin is collapsing with the top margin and the result is all being treated as top margin. The CSS spec requires this behavior, and all modern browsers (which doesn’t include IE7, of course) implement it.