Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Width of elements: should include padding or not?

Reply
Thread Tools

Width of elements: should include padding or not?

 
 
delerious@no.spam.com
Guest
Posts: n/a
 
      12-11-2003
I am noticing that Mozilla does not include an element's padding when
calculating its width. IE and Opera do. Who is correct?

 
Reply With Quote
 
 
 
 
Lauri Raittila
Guest
Posts: n/a
 
      12-11-2003
In article http://www.velocityreviews.com/forums/(E-Mail Removed) 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.

 
Reply With Quote
 
 
 
 
delerious@no.spam.com
Guest
Posts: n/a
 
      12-11-2003
On Thu, 11 Dec 2003 11:29:45 +0200, Lauri Raittila <(E-Mail Removed)>
wrote:
>In article (E-Mail Removed) 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">

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-11-2003
(E-Mail Removed) 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
delerious@no.spam.com
Guest
Posts: n/a
 
      12-11-2003
On Thu, 11 Dec 2003 09:57:12 +0000, Steve Pugh <(E-Mail Removed)> 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.

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-11-2003
(E-Mail Removed) wrote:
>On Thu, 11 Dec 2003 09:57:12 +0000, Steve Pugh <(E-Mail Removed)> 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
delerious@no.spam.com
Guest
Posts: n/a
 
      12-11-2003
On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <(E-Mail Removed)> 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.

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-11-2003
(E-Mail Removed) wrote:

>On Thu, 11 Dec 2003 10:32:38 +0000, Steve Pugh <(E-Mail Removed)> 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
delerious@no.spam.com
Guest
Posts: n/a
 
      12-11-2003
On Thu, 11 Dec 2003 11:19:55 +0000, Steve Pugh <(E-Mail Removed)> 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.

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-11-2003
(E-Mail Removed) wrote:
>On Thu, 11 Dec 2003 11:19:55 +0000, Steve Pugh <(E-Mail Removed)> 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
/* #include <someyhing.h> */ => include it or do not include it?That is the question .... Andreas Bogenberger C Programming 3 02-22-2008 10:53 AM
CSS question: Using height/width at 100% with fixed-width borders/margin/padding cera HTML 1 08-18-2007 02:59 AM
Getting width of element content without padding/border/margin? Markus Fischer Javascript 0 11-22-2005 02:56 PM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
How do I do a layout with 100% width minus padding on left and right? Tony M HTML 5 09-07-2005 10:48 PM



Advertisments