Padding problem in Firefox

I use to trust Firefox, but in this case, I don't know what to think. My
test page:

http://gusgus.cn/test/index.html

IE6 does the right thing. The containting <div> is 600px, and within it,
there's one <div> of 400px and another of 200px, laying side by side.
The right <div> has padding on the left and right, to add some space
within the box, but Firefox (0.9.2) seem to confuse paddings as margins.
Here's the right <div> in my CSS:

#right {
float: right;
width: 200px;
overflow: hidden;
background-color: #DDDDFF; /* blue */
text-align: left;
padding: 8px 8px 8px 8px;
}

This box in Firefox is not 200 wide, but 216 (width + padding). It must
be a bug, or my understanding of margins and padding will crumble.

Gustaf

Gustaf Liljegren wrote:

I use to trust Firefox, but in this case, I don't know what to think. My
test page:

http://gusgus.cn/test/index.html

IE6 does the right thing. The containting <div> is 600px, and within it,
there's one <div> of 400px and another of 200px, laying side by side.
The right <div> has padding on the left and right, to add some space
within the box, but Firefox (0.9.2) seem to confuse paddings as margins.
Here's the right <div> in my CSS:

#right {
float: right;
width: 200px;
overflow: hidden;
background-color: #DDDDFF; /* blue */
text-align: left;
padding: 8px 8px 8px 8px;
}

This box in Firefox is not 200 wide, but 216 (width + padding). It must
be a bug, or my understanding of margins and padding will crumble.

Firefox is right. IE6 shows it wrong, but only because you are
triggering quirks mode. See
<http://gutfeldt.ch/matthias/articles/doctypeswitch.html> for details on
quirks and standard mode.

And see
<http://msdn.microsoft.com/workshop/author/css/overview/cssenhancements.asp>
for Microsoft's explanation of the differences, particularly
<http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_top ic3>,
"Fix the Box Instead of Thinking Outside It"

If you remove the <?xml version="1.0" encoding="utf-8"?> line, you'll
trigger standard mode in IE6 and it will show the page the same way as
Firefox.


Matthias

Gustaf Liljegren <gustafl (AT) algonet (DOT) se> wrote:

I use to trust Firefox, but in this case, I don't know what to think. My
test page:

http://gusgus.cn/test/index.html

IE6 does the right thing. The containting <div> is 600px, and within it,
there's one <div> of 400px and another of 200px, laying side by side.
The right <div> has padding on the left and right, to add some space
within the box, but Firefox (0.9.2) seem to confuse paddings as margins.
Here's the right <div> in my CSS:

#right {
float: right;
width: 200px;
overflow: hidden;
background-color: #DDDDFF; /* blue */
text-align: left;
padding: 8px 8px 8px 8px;
}

This box in Firefox is not 200 wide, but 216 (width + padding). It must
be a bug, or my understanding of margins and padding will crumble.

Width 200px + left padding 8px + right padding 8px = 216px.
FireFox is right.

IE6 would also be right if you triggered Standards mode, at present
you trigger quirks mode and so it emulates the bugs in IE5 and puts
the padding inside the width. IE6 has a big whereby it triggers quirks
mode upon encountering the xml declaration before the doctype. Ditch
that and it will behave like FireFox (and Opera).

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 Mon, 09 Aug 2004 16:20:03 +0200, Gustaf Liljegren
<gustafl (AT) algonet (DOT) se> wrote:

http://gusgus.cn/test/index.html

IE6 does the right thing...

No it's not, provided that I have understood your question correct.

Here's the right <div> in my CSS:

#right {
float: right;
width: 200px;
overflow: hidden;
background-color: #DDDDFF; /* blue */
text-align: left;
padding: 8px 8px 8px 8px;
}

This box in Firefox is not 200 wide, but 216...
...a bug, or my understanding of margins and padding
will crumble.

The total outside width of a <div> box is the sum of the values for the
following properties...

margin-left
+ border-left-width
+ padding-left
+ width
+ padding-right
+ border-right-width
+ margin-right
= total occupied width of any {display:block} type box

So your "understanding of margins and padding" needs to be updated :-)

Most especially; the 'width' property suggests a width for the box
content only, all the other properties are added on the outside of that
inner content width.

<http://www.w3.org/TR/CSS1#block-level-elements>

--
Rex

Gustaf Liljegren wrote:

I use to trust Firefox, but in this case, I don't know what to think. My
test page:

http://gusgus.cn/test/index.html

This box in Firefox is not 200 wide, but 216 (width + padding). It must
be a bug, or my understanding of margins and padding will crumble.

No, Firefox is doing it correctly, it should be 216px. As Matthias
already said, you're triggerring quirks mode in IE, which explians why
it's using the buggy, IE5/Win box-model. (See Tantek's box model hack [1]

The problem is that the full width of a box is calculated by:
(L = Left, R = Right, M = Margin, B = Border, P = Padding)

LM + LB + LP + Width + RP + RB + RM

So, your box width's are:

* #container:
LM + LB + LP + Width + RP + RB + RM
0 0 0 600px 0 0 0 = 600px

* #left:
LM + LB + LP + Width + RP + RB + RM
0 + 0 + 0 + 400px + 0 + 0 + 0 = 400px

* #right:
LM + LB + LP + Width + RP + RB + RM
0 + 0 + 8px + 200px + 8px + 0 + 0 = 216px

So, your #left + #right = 616px, which is wider than #container, so
there is no room for Firefox to fit #right where you want it to. The
easiest fix will be to reduce widht of #left and #right by a total of
16px, and everything should fit nicely. it works best if you set:

#right { width: 384px }
[1] http://www.tantek.com/CSS/Examples/boxmodelhack.html

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to abuse (AT) 127 (DOT) 0.0.1
Thank you.

Thanks a lot to everyone who help me with this question. Now I
understand what widths and heights really are.

But I can't help thinking IE had a good idea. The standard compliant way
means that everytime you use a little border or padding, you also need
to subtract the same amounts from the widths and heights = more fiddling
before you get it right.

Anyway, I'm glad to understand now.

Gustaf