473,406 Members | 2,847 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

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?

Jul 20 '05 #1
8 3388
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
by: delerious | last post by:
I need to determine an element's width and height in pixels (not including padding, border, and margin) in Javascript. The element will not have width or height styles specified. In Mozilla, I...
15
by: Peter Pfannenschmid | last post by:
Dear all, my question is concerning the following html page: http://www.omeganet.de/test/test.shtml Could anybody tell me why the text input box (the fourth element) is wider than the other...
5
by: Robert Downes | last post by:
I'm using the following in a page that I'm testing in Mozilla: p.actionLinkBlock {border: 1px #000000 dashed; padding: 0.2cm; width: auto} But the dashed border is extending to the right-edge...
17
by: Piers Lawson | last post by:
If the following is displayed in IE6 or FireFox, the text box forces the second DIV to expand beyond its 15em width. Is there a way to have the text box fit within the DIV (preferably without...
7
by: R0bert Nev1lle | last post by:
Internet Explorer always presents me with a challenge (partial repost). The current issue involves emulating max-width in IE using the technique described by Svend Tofte. ...
7
by: Luke Matuszewski | last post by:
Hi. I know that it is hard problem (as hard as CSS and HTML layouting rules apply), but maybe someone has some code or idea how to start it. For now i know i will cssQuery: ...
50
by: Shadow Lynx | last post by:
Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>...
16
by: FuzzyLogik | last post by:
By width, I don't mean weight. I have a row of <li>'s, with a bottom-border. I want the bottom-border to only go 90% of the <li> (centered) Is there any way to do this? I have it in this...
5
by: Agix | last post by:
Hi there, Please check out : http://clarifysolutions.co.uk/certenroll/ The source is included below. This page is a test, so I can play about with paddings, margins and layouts using divs as...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.