padding in divs - with mozilla

Discussion in 'HTML' started by Adi Schwarz, Dec 22, 2003.

  1. Adi Schwarz

    Adi Schwarz Guest

    Hi,

    Is it known that mozilla has problems with aboslute widths in divs?

    I reduced that error to a very simple page:


    <html>
    <body>

    <div style="width:50px; background-color: blue; padding:5px">nl</div>

    <table style="width:50px; background-color: green; padding: 0px"
    border="0" cellspacing=0 cellpadding=0><tr><td>asd</td>

    </tr></table>
    </body>
    </html>


    Mozilla seems to mistake padding with margin in that context - the div's
    width is 60px in this context (the DOM-Inspector calculates the right
    CSS-definitions, but in the "box-model" it says 60px width to this box).
    This does not occur if padding is set to 0px.

    My IE5 has no problems with that situation, but I have been told that
    some IEs make similar errors when there is some content in the div.

    Had anyone else that strange problem?

    Greets,
    -adi
     
    Adi Schwarz, Dec 22, 2003
    #1
    1. Advertising

  2. Adi Schwarz wrote:

    > <div style="width:50px; background-color: blue; padding:5px">nl</div>
    >
    > Mozilla seems to mistake padding with margin in that context - the div's
    > width is 60px in this context


    The blue box created by the <div> *should* be 60px in this case. Padding
    is ADDED ON to the width when drawing the box.

    > My IE5 has no problems with that situation,


    IE5 gets it wrong and instead it SUBTRACTS the padding from inside the
    50px blue box, giving the content ("nl") only 40px of space. This
    particular IE bug is fixed in IE6 (and IE5 for Mac)

    For more information on this matter (called the CSS "box model") see:

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

    There is a similar explanation in the CSS1 spec, but I think the CSS2
    explanation is a little clearer, with a better diagramme.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Dec 22, 2003
    #2
    1. Advertising

  3. Toby A Inkster wrote:

    > Adi Schwarz wrote:


    >> <div style="width:50px; background-color: blue; padding:5px">nl</div>
    >>
    >> Mozilla seems to mistake padding with margin in that context - the div's
    >> width is 60px in this context

    >
    > The blue box created by the <div> *should* be 60px in this case. Padding
    > is ADDED ON to the width when drawing the box.


    ^ to the content width

    >> My IE5 has no problems with that situation,


    > IE5 gets it wrong and instead it SUBTRACTS the padding from inside the
    > 50px blue box, giving the content ("nl") only 40px of space. This
    > particular IE bug is fixed in IE6 (and IE5 for Mac)


    IE, except version 6 when in standards mode, treats width as "width between
    vertical borders", the specification says "width of content".


    --
    David Dorward <http://dorward.me.uk/>
     
    David Dorward, Dec 22, 2003
    #3
    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. Ralf Müller
    Replies:
    2
    Views:
    540
    Ralf Müller
    Jan 3, 2005
  2. Replies:
    1
    Views:
    682
    SwissCheese
    Dec 21, 2003
  3. Henri
    Replies:
    9
    Views:
    1,903
    Toby Inkster
    Feb 22, 2005
  4. rich
    Replies:
    0
    Views:
    752
  5. maya
    Replies:
    4
    Views:
    262
Loading...

Share This Page