margin differences in IE and FF esp. top and bottom

Discussion in 'HTML' started by state.cs@gmail.com, Oct 15, 2008.

  1. Guest

    Readers,

    I am in the process of learning CSS. I wrote the following CSS and
    HTML:

    <style type="text/css">
    .wrapper {
    width:470px; background-color:#000000; color:#FFFFFF;
    }
    .testing {
    margin:5px; background-color:#CCCCCC;
    }
    </style>

    <body style="background-color:#FFFFCC; margin:0; padding:0;">
    <div class="wrapper">
    <div class="testing">What's up dude?</div>
    </div>

    IE 5.5, 6 and 7 display a 5px black area all 4 sides of div.testing.
    FF 2 and Chrome display 5px black area only on the right and the left,
    but nothing on the top and bottom. I would like FF and Chrome to
    display a 5px on the top and the bottom as does IE. How can I achieve
    that?

    Can someone please indicate the reason for such difference between IE
    and FF/Chrome and how I can overcome it in future? I have read the box
    model and various CSS hacks, but with limited practical knowledge, I
    am a little confused.

    Thank you.
    , Oct 15, 2008
    #1
    1. Advertising

  2. C A Upsdell Guest

    wrote:
    > Readers,
    >
    > I am in the process of learning CSS. I wrote the following CSS and
    > HTML:
    >
    > <style type="text/css">
    > .wrapper {
    > width:470px; background-color:#000000; color:#FFFFFF;
    > }
    > .testing {
    > margin:5px; background-color:#CCCCCC;
    > }
    > </style>
    >
    > <body style="background-color:#FFFFCC; margin:0; padding:0;">
    > <div class="wrapper">
    > <div class="testing">What's up dude?</div>
    > </div>
    >
    > IE 5.5, 6 and 7 display a 5px black area all 4 sides of div.testing.
    > FF 2 and Chrome display 5px black area only on the right and the left,
    > but nothing on the top and bottom. I would like FF and Chrome to
    > display a 5px on the top and the bottom as does IE. How can I achieve
    > that?
    >
    > Can someone please indicate the reason for such difference between IE
    > and FF/Chrome and how I can overcome it in future? I have read the box
    > model and various CSS hacks, but with limited practical knowledge, I
    > am a little confused.


    The <body> tag is inside the <html> tag, and browsers do create margins
    and/or padding for the <html> block. This will get rid of any html
    margins and padding on any browser.

    html { margin:0; padding:0; }
    C A Upsdell, Oct 15, 2008
    #2
    1. Advertising

  3. Mayeul Guest

    a écrit :
    > Can someone please indicate the reason for such difference between IE
    > and FF/Chrome and how I can overcome it in future? I have read the box
    > model and various CSS hacks, but with limited practical knowledge, I
    > am a little confused.


    Hi,

    It always help to provide an URL to the test case.

    Anyway, you don't see the 5px at the top and bottom because .wrapper's
    and .testing's vertical margins collapse:

    http://www.w3.org/TR/CSS21/box.html#collapsing-margins

    So the inner box's margin does not force the outer box to grow
    vertically, and then, no additionnal black background.

    You could get these black areas on all edges by using 5px padding in the
    outer box, rather than relying on the inner box's margin. It works with
    IE too.

    --
    Mayeul
    Mayeul, Oct 16, 2008
    #3
  4. Guest

    On Oct 16, 5:11 am, Mayeul <> wrote:
    > a écrit :
    >
    > > Can someone please indicate the reason for such difference between IE
    > > and FF/Chrome and how I can overcome it in future? I have read the box
    > > model and various CSS hacks, but with limited practical knowledge, I
    > > am a little confused.

    >
    > Hi,
    >
    > It always help to provide an URL to the test case.


    Sorry about that; I was working on a local (non-public) web server.

    >
    > Anyway, you don't see the 5px at the top and bottom because .wrapper's
    > and .testing's vertical margins collapse:
    >
    > http://www.w3.org/TR/CSS21/box.html#collapsing-margins


    I did go through this but there were some aspects I did not
    understand, thereby limiting overall understanding of collapsing
    margins. When I drew a border around div.wrapper, I was able to see
    that the 5px top and bottom margin existed - just that they weren't
    colored black in FF/Chrome but they were colored black in IE. That
    confused me.

    >
    > So the inner box's margin does not force the outer box to grow
    > vertically, and then, no additionnal black background.
    >
    > You could get these black areas on all edges by using 5px padding in the
    > outer box, rather than relying on the inner box's margin. It works with
    > IE too.


    That definitely helped. Instead of adding a margin to div.testing it
    helps adding padding to div.wrapper. Thanks for your suggestions.



    >
    > --
    > Mayeul
    , Oct 16, 2008
    #4
  5. GTalbot Guest

    On 15 oct, 17:50, C A Upsdell <> wrote:

    > The <body> tag is inside the <html> tag, and browsers do create margins
    > and/or padding for the <html> block.  This will get rid of any html
    > margins and padding on any browser.
    >
    >      html { margin:0; padding:0; }


    Chuck, are you sure about this?

    No browser that I know of styles the html with a margin and a padding
    on the <html> block element.

    http://www.gtalbot.org/DHTMLSection/BrowsersDefaultValues.html

    Regards, Gérard
    GTalbot, Nov 25, 2008
    #5
  6. C A Upsdell Guest

    GTalbot wrote:
    > On 15 oct, 17:50, C A Upsdell <> wrote:
    >
    >> The <body> tag is inside the <html> tag, and browsers do create margins
    >> and/or padding for the <html> block. This will get rid of any html
    >> margins and padding on any browser.
    >>
    >> html { margin:0; padding:0; }

    >
    > Chuck, are you sure about this?
    >
    > No browser that I know of styles the html with a margin and a padding
    > on the <html> block element.


    Hmmm. I remember it happening, but a check with a suite of modern
    browsers did not reveal any that does. Perhaps with an old browser?
    I've been making websites for a long time: sometimes from habit I design
    around problems that no longer exist; and often my older sites retain
    workarounds for browsers which are long extinct. Sigh.
    C A Upsdell, Nov 25, 2008
    #6
    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. Cuthbert
    Replies:
    8
    Views:
    411
    Ancient_Hacker
    Sep 13, 2006
  2. alice
    Replies:
    3
    Views:
    364
    Ben C
    Aug 4, 2007
  3. GTalbot
    Replies:
    0
    Views:
    537
    GTalbot
    Nov 10, 2007
  4. Cal Who
    Replies:
    1
    Views:
    413
    Alexey Smirnov
    May 16, 2010
  5. Cal Who
    Replies:
    4
    Views:
    558
    Cal Who
    May 17, 2010
Loading...

Share This Page