Width of elements: should include padding or not?

I am noticing that Mozilla does not include an element's padding when
calculating its width. IE and Opera do. Who is correct?

In article delerious (AT) no (DOT) spam.com 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.

delerious (AT) no (DOT) spam.com 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 <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <steve (AT) pugh (DOT) net> 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.

delerious (AT) no (DOT) spam.com wrote:

On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <steve (AT) pugh (DOT) net> 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 <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

On Thu, 11 Dec 2003 11:19:55 +0000, Steve Pugh <steve (AT) pugh (DOT) net> 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.