SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE, Firefox: DIV Gap Discrepency

    Can anyone explain this gap? Also a possible work-around.

    The gap goes away when setting <p style="margin: 0">, but I cannot use that solution in my production code. Am I structuring my markup incorrectly or is there a misuse of css?

    HTML Code:
    <body style="background: darkblue;">
    <div style="width: 980px; background: white;"><div><p>&nbsp;</p></div></div>
    <div style="background: url('footer.png'); width: 980px; height: 24px;"></div>
    </body>



    Here's the footer:


  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From your description it sounds like a collapsing margin is pushing the footer down.

    To avoid the paragraph top margin collapsing with the footer top margin (if not set it is auto or zero), you could try overflow:hidden on the footer.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast Linkoroo's Avatar
    Join Date
    Jul 2009
    Location
    linkoroo.com
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried using this?

    <div style="clear:both"></div>

    So you would have something like this:

    <body style="background: darkblue;">
    <div style="width: 980px; background: white;"><div><p>&nbsp;</p></div></div>
    <div style="background: url('footer.png'); width: 980px; height: 24px;"></div>
    <div style="clear:both"></div>
    </body>

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guys, I've tried both things:

    1. "overflow: hidden" for the footer
    2. <div style="clear:both"></div> below both DIVs

    Neither work. I've now resorted to setting <p style="margin: 0; margin-top: 12px"> That will remove that gap between the footer and the body while still giving me paragraph spacing. It's a bit crude, but the output is now consistent on all modern browsers.

    The issue is how Firefox and Opera are interpretting the size of margin-bottom; giving margin-bottom in <p> a value anything other than 0 results in the gap; other margin directions do not affect the spacing. IE seems to be doing it as I expect. But Firefox and Opera are highly standards compliant, so...

    Anyways, thanks for the replies.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vibrantsoftware View Post
    Guys, I've tried both things:

    1. "overflow: hidden" for the footer
    2. <div style="clear:both"></div> below both DIVs

    Neither work. I've now resorted to setting <p style="margin: 0; margin-top: 12px"> That will remove that gap between the footer and the body while still giving me paragraph spacing. It's a bit crude, but the output is now consistent on all modern browsers.
    The issue is how Firefox and Opera are interpretting the size of margin-bottom; giving margin-bottom in <p> a value anything other than 0 results in the gap; other margin directions do not affect the spacing. IE seems to be doing it as I expect. But Firefox and Opera are highly standards compliant, so...

    Anyways, thanks for the replies.
    We can get rid of that if you give us the link .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vibrantsoftware View Post
    ...
    The issue is how Firefox and Opera are interpretting the size of margin-bottom; giving margin-bottom in <p> a value anything other than 0 results in the gap; other margin directions do not affect the spacing. IE seems to be doing it as I expect. But Firefox and Opera are highly standards compliant, so...
    The difference here is not interpreting the size of the margin. It is that the paragraph's margin collapses to the parent div (and then again the div to its parent) in good browsers, while IE will not collapse margins to a parent that has hasLayout.

    Good browsers uses overflow to do the same.

    Compare IE and FF while disabling the hasLayout-triggering width on the paragraph's grand parent:
    Code:
    <body style="background: darkblue;">
    
    <div style="/*width:980px;*/ background:white;">
        <div>
            <p style="margin:12px 0;">&nbsp;</p>
        </div>
    </div>
    <div style="background:red url('footer.png'); width:980px; height:24px;"></div>
    
    </body>
    Then compare IE and FF with the width enabled and apply overflow on the paragraph's grand parent:
    Code:
    <body style="background: darkblue;">
    
    <div style="width:980px; background:white; overflow:hidden;">
        <div>
            <p style="margin:12px 0;">&nbsp;</p>
        </div>
    </div>
    <div style="background:red url('footer.png'); width:980px; height:24px;"></div>
    
    </body>
    I seem to have mixed the divs in my answer before, naming the wrong div "footer".
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Erik, thank you very much for your detailed solution. The markup is now displaying consistently across all browsers.

    I will do some research on margin collapsing when I have time.

    Thanks again to everyone for taking the time to respond.


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
  •