242719 - Padding and margin gets added to width when using width of 100%

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Miquel "Fire" Burns]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7b) Gecko/20040421
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7b) Gecko/20040421

In http://eps.fab.wayne.edu/coeus/Awards/detail/template.htm, with Mozilla 1.7,
the width of a div is incorrectly calculated with the width being 100%. The
amount that it's too wide happens to be whatever the padding and margins for the
sides are. The page displays as expected in Mozilla 1.6 and IE 6 SP 1

Reproducible: Always
Steps to Reproduce:
View the page
Actual Results:  
Right side of a div tag is some pixels larger based on what the current Margin
and padding settings are.

Expected Results:  
The div tags width should at least be (margin-right + margin-left + padding-left
+ padding-right) pixels smaller.

Comment 1

[Boris Zbarsky [:bzbarsky]]

I see identical (and correct) layout in Mozilla builds right before 1.6 branched
and current trunk.  IE's behavior is in fact totally incorrect.

See section 4.1.2 of the CSS1 spec
(http://www.w3.org/TR/REC-CSS1#horizontal-formatting):

   The horizontal position and size of a non-floating, block-level
   element is determined by seven properties: 'margin-left',
   'border-left', 'padding-left', 'width', 'padding-right',
   'border-right' and 'margin-right'.

thus implying that "width" does not include border, padding, or
margin.  Further, CSS2 (at
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width) explicitly
says:

     This property specifies the content width of boxes generated by block-level
     and replaced elements.

And at http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions the
specification pretty clearly says that "content width" means "not
including margin/border/padding".

Furthermore, see http://www.tantek.com/CSS/Examples/boxmodelhack.html.
This page was created by one of the members of the CSS working group,
who also happens to be the technical lead of the Mac IE team.  The
page describes what the correct behavior is and further illustrates a
hack to get IE5/Windows and IE5.5/Windows to do the right thing
(basically, by giving them rules that actually set the wrong width).
IE6, like Mozilla and MacIE, has two rendering modes -- your page
triggers the "BackCompat" mode in which its rendering is broken.  In
its "CSS1Compat" mode it will render your page just like Mozilla does.
See
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/compatmode.asp
for more information on that.