SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox & IE8 Display glitch

    On this page > http://stones-alt.clickbump.com/riha...e-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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    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
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •