By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

Width of elements: should include padding or not?

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

Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
In article de*******@no.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.

Jul 20 '05 #2

P: n/a
On Thu, 11 Dec 2003 11:29:45 +0200, Lauri Raittila <la***@raittila.cjb.net>
wrote:
In article de*******@no.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


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">

Jul 20 '05 #3

P: n/a
de*******@no.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4

P: n/a
On Thu, 11 Dec 2003 09:57:12 +0000, Steve Pugh <st***@pugh.net> 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.

Jul 20 '05 #5

P: n/a
de*******@no.spam.com wrote:
On Thu, 11 Dec 2003 09:57:12 +0000, Steve Pugh <st***@pugh.net> 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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #6

P: n/a
On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <st***@pugh.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.

Jul 20 '05 #7

P: n/a
de*******@no.spam.com wrote:
On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <st***@pugh.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #8

P: n/a
On Thu, 11 Dec 2003 11:19:55 +0000, Steve Pugh <st***@pugh.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.

Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.