Width of elements: should include padding or not?

Discussion in 'HTML' started by delerious@no.spam.com, Dec 11, 2003.

  1. Guest

    I am noticing that Mozilla does not include an element's padding when
    calculating its width. IE and Opera do. Who is correct?
    , Dec 11, 2003
    #1
    1. Advertising

  2. In article wrote:
    > I am noticing that Mozilla does not include an element's padding when
    > calculating its width.


    Thats correct.

    > IE and Opera do.


    If you tricker their quirks mode.

    Use doctype that trickers standards mode in all capable browsers.
    http://www.hut.fi/~hsivonen/doctype.html


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
    tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    Lauri Raittila, Dec 11, 2003
    #2
    1. Advertising

  3. Guest

    On Thu, 11 Dec 2003 11:29:45 +0200, Lauri Raittila <>
    wrote:
    >In article wrote:
    >> I am noticing that Mozilla does not include an element's padding when
    >> calculating its width.

    >
    >Thats correct.
    >
    >> IE and Opera do.

    >
    >If you tricker their quirks mode.
    >
    >Use doctype that trickers standards mode in all capable browsers.
    >http://www.hut.fi/~hsivonen/doctype.html


    This is the doctype that I am using, which should not trigger any quirks
    modes:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    , Dec 11, 2003
    #3
  4. Steve Pugh Guest

    wrote:

    >I am noticing that Mozilla does not include an element's padding when
    >calculating its width.


    True.

    > IE and Opera do.


    Win IE 5.5 and lower do.
    Opera 6 and lower doesn't.
    Win IE6, Mac IE5 and Opera 7 only do so if you trigger quirks mode.

    > Who is correct?


    Mozilla, etc. See the CSS spec.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Dec 11, 2003
    #4
  5. Guest

    On Thu, 11 Dec 2003 09:57:12 +0000, Steve Pugh <> wrote:
    >Win IE 5.5 and lower do.


    Yes I am using IE 5.5.

    >Win IE6, Mac IE5 and Opera 7 only do so if you trigger quirks mode.


    Opera 7.22 does include padding, and I am using the following doctype, which I
    believe should not trigger quirks mode:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    >> Who is correct?

    >
    >Mozilla, etc. See the CSS spec.


    OK thanks.
    , Dec 11, 2003
    #5
  6. Steve Pugh Guest

    wrote:
    >On Thu, 11 Dec 2003 09:57:12 +0000, Steve Pugh <> wrote:
    >>
    >>Win IE6, Mac IE5 and Opera 7 only do so if you trigger quirks mode.

    >
    >Opera 7.22 does include padding, and I am using the following doctype, which I
    >believe should not trigger quirks mode:
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >


    Hmm, can you post a URL so we can check?

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Dec 11, 2003
    #6
  7. Guest

    On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <> wrote:
    >Hmm, can you post a URL so we can check?


    Here you go:
    http://home.comcast.net/~delerious1/widthtest.html

    Mouse over the link to see how wide it is. Mozilla 1.5 and Opera 7.22 report
    different values because of the padding.
    , Dec 11, 2003
    #7
  8. Steve Pugh Guest

    wrote:

    >On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <> wrote:
    >>Hmm, can you post a URL so we can check?

    >
    >Here you go:
    >http://home.comcast.net/~delerious1/widthtest.html
    >
    >Mouse over the link to see how wide it is. Mozilla 1.5 and Opera 7.22 report
    >different values because of the padding.


    Ah, this is a totally different problem to the one I, and I guess
    everyone else, thought you were describing.

    The normal problem is a style like this:

    width: 200px;
    padding: 20px;

    which in correctly behaving browsers creates a box 240px wide, but in
    incorrectly behaving browsers (IE5.5 and down, IE6 and Opera 7 in
    quirks mode) created a box only 200px wide.

    However, you haven't defined a width in your CSS at all, and you're
    problem is that the DOM getComputedStyle returns different values for
    the width.

    I get,
    350px in IE (but that's the offsetWidth not the width)
    50px in Mozilla
    341px in Opera 7 (I have a smaller font size in Opera, I bet it would
    be 350px if I had the same font settings as in IE and Mozilla).

    I think this is a bug in Opera's DOM support but I'm not enough of an
    expert on that part of the DOM to be sure. IE (even version 6) is
    reporting on a totally different property and hence returns a totally
    different value.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Dec 11, 2003
    #8
  9. Guest

    On Thu, 11 Dec 2003 11:19:55 +0000, Steve Pugh <> wrote:
    >I get,
    >350px in IE (but that's the offsetWidth not the width)


    What is the difference between offsetWidth and width?


    OK, now I understand why Mozilla is (correctly) returning 50.
    , Dec 11, 2003
    #9
  10. Steve Pugh Guest

    wrote:
    >On Thu, 11 Dec 2003 11:19:55 +0000, Steve Pugh <> wrote:
    >>
    >>I get,
    >>350px in IE (but that's the offsetWidth not the width)

    >
    >What is the difference between offsetWidth and width?


    Width is the width, or should be.

    offsetWidth is a MS-ism and what it returns varies between different
    versions of IE (and varies even more in other browsers that support it
    as a convenience).
    In general terms it returns the border to border length, i.e. border +
    padding + width + padding + border.

    In IE4 to 5.5 the offsetWidth and width would sometimes be the same as
    those browsers calculated widths incorrectly. In IE6 (in standards
    mode) the width is calculated correctly but the offsetWidth still
    returns the border to border value.

    There is no property in IE6 standards mode that returns the same value
    as width does in Mozilla. However in quirks mode and in older IE
    versions clientWidth will usually return the same as Mozilla width.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Dec 11, 2003
    #10
  11. Guest

    On Thu, 11 Dec 2003 19:46:44 +0000, Steve Pugh <> wrote:
    >In IE6 (in standards
    >mode) the width is calculated correctly but the offsetWidth still
    >returns the border to border value.
    >
    >There is no property in IE6 standards mode that returns the same value
    >as width does in Mozilla.


    Don't these 2 statements contradict each other?
    , Dec 14, 2003
    #11
  12. Steve Pugh Guest

    wrote:

    >On Thu, 11 Dec 2003 19:46:44 +0000, Steve Pugh <> wrote:
    >>In IE6 (in standards
    >>mode) the width is calculated correctly but the offsetWidth still
    >>returns the border to border value.
    >>
    >>There is no property in IE6 standards mode that returns the same value
    >>as width does in Mozilla.

    >
    >Don't these 2 statements contradict each other?


    No the first refers to the displayed width on screen calculated from
    the supplied CSS width.

    The second refers to what values are available via the DOM to
    scripting.

    Remember that you are NOT giving a width value in the CSS, therefore
    the first statement doesn't apply at all to your case. There is no
    value in IE6 that can reliably give the same result as the
    getComputedStyle width in Mozilla.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Dec 14, 2003
    #12
    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. AndrewF
    Replies:
    1
    Views:
    758
    Bruce Barker
    Oct 10, 2005
  2. Tony M
    Replies:
    5
    Views:
    2,056
    Tony M
    Sep 7, 2005
  3. cera
    Replies:
    1
    Views:
    1,259
    Neredbojias
    Aug 18, 2007
  4. Andreas Bogenberger
    Replies:
    3
    Views:
    899
    Andreas Bogenberger
    Feb 22, 2008
  5. Markus Fischer
    Replies:
    0
    Views:
    400
    Markus Fischer
    Nov 22, 2005
Loading...

Share This Page