margin-bottom not consistant with browsers

Discussion in 'HTML' started by alice, Aug 4, 2007.

  1. alice

    alice Guest

    I've got a div with a bottom margin of 12px. In IE7, the margin is in
    fact 12 px, but in Firefox, it's 30 px. Can someone tell me what's
    going on here and what I can do about it? I'm pretty sure it's not an
    issue along the lines of "Firefox adds 18 px to all bottom margins",
    so what type of issue is this?
     
    alice, Aug 4, 2007
    #1
    1. Advertising

  2. alice

    dorayme Guest

    In article
    <>,
    alice <> wrote:

    > I've got a div with a bottom margin of 12px. ...
    > in Firefox, it's 30 px.


    I'd like to see that!

    --
    dorayme
     
    dorayme, Aug 4, 2007
    #2
    1. Advertising

  3. alice

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sat, 04 Aug 2007 00:05:04 GMT
    alice scribed:

    > I've got a div with a bottom margin of 12px. In IE7, the margin is in
    > fact 12 px, but in Firefox, it's 30 px. Can someone tell me what's
    > going on here and what I can do about it? I'm pretty sure it's not an
    > issue along the lines of "Firefox adds 18 px to all bottom margins",
    > so what type of issue is this?


    Probably an extra LF/CR from some source or t'other. Look for <br>s, esp.
    at end or beginning of containers and how text flows therewithin.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
     
    Neredbojias, Aug 4, 2007
    #3
  4. alice

    Ben C Guest

    On 2007-08-04, alice <> wrote:
    > I've got a div with a bottom margin of 12px. In IE7, the margin is in
    > fact 12 px, but in Firefox, it's 30 px. Can someone tell me what's
    > going on here and what I can do about it? I'm pretty sure it's not an
    > issue along the lines of "Firefox adds 18 px to all bottom margins",
    > so what type of issue is this?


    Could be margin-collapsing, which IE7 might get wrong (it is a little
    complicated to understand). What kind of bottom margin does the div's
    container have, and does the container also have zero bottom padding and
    border?

    This would give the effect you describe for example:

    <body>
    <div style="margin-bottom: 30px; background-color: red;">
    <div style="margin-bottom: 18px; background-color: lavender">
    Hello
    </div>
    </div>
    world
    </body>

    You shouldn't be able to see any red, and there should be 30px between
    the bottom of "Hello" and the top of "world".
     
    Ben C, Aug 4, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    2
    Views:
    464
    tshad
    Apr 21, 2005
  2. GTalbot
    Replies:
    0
    Views:
    583
    GTalbot
    Nov 10, 2007
  3. dorayme
    Replies:
    22
    Views:
    6,811
    dorayme
    Mar 17, 2008
  4. Cal Who
    Replies:
    1
    Views:
    454
    Alexey Smirnov
    May 16, 2010
  5. Cal Who
    Replies:
    4
    Views:
    600
    Cal Who
    May 17, 2010
Loading...

Share This Page