On this page > http://stones-alt.clickbump.com/rihannas-rolling-stone-cover-shoot/
When viewed in Firefox (I’m on version 20) or IE8, the .wrap div (yellow background area) should fall below the top nav menu (as it does when viewed in Chrome, Safari or IE9+)
Any ideas what’s causing the layout glitch in FF and IE8?
The nav menu is AP’d, however, I have a defined css height on the header element to clear its height.
Did you link to the right page? I can’t see what you are describing, and the pages look the same in FF and Chrome.
I meant to update the post with my fix. Its very strange, but I found that when I removed the negative top margin from the “Back to Top” element (way at the bottom of the document tree), the glitch corrected itself.
So, for whatever reason, that negative margin was throwing off Firefox. Removing the margin fixed the issue for Firefox, but IE 8 still does not like the header area much.
So, for whatever reason, that negative margin was throwing off Firefox.
The problem was (and is) that your section.wrap element is not containing the two floats (which are its only content) and therefore the negative top margin on your back to top element collapses onto .main (because it is empty) and pulls the page into the header. If you had contained the floats then this would not have happened.
Good catch Paul. When you say “not containing the floats”, I’m guessing that it could be remedied by clearing the floats with an overflow:hidden or adding a clear div before the close of the section.wrap element. Is that your suggestion?
And as far as webkit is concerned, is it automatically clearing them for me? Otherwise, I’m not sure why it does not exhibit the same layout as FF.
Yes overflow:hidden would have worked or so would a clear:div. (Anything with real content that has cleared the float.)
And as far as webkit is concerned, is it automatically clearing them for me? Otherwise, I’m not sure why it does not exhibit the same layout as FF.
Webkit isn’t clearing the floats as such but because backtotop is set to clear:both then it should clear the floats above and its top margin automatically increased to push it below any floats.
It seems that Firefox is buggy and confused with this scenario and exhibits a collapsing margin bug (it always did have problems with collapsing margins and clearing empty content which is why the old clearfix hack had a dot inside the content property and why a div clearer needed to be height:1px to work - maybe its still the remnants of this old bug although the other issues are fixed these days).