195331 - div padding increases object size

Status: RESOLVED INVALID

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

Description

[Vaughn]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.2.1) Gecko/20021130
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.2.1) Gecko/20021130

When adding padding to a layer, Mozilla/Netscape/Opera increases the layer size
instead of moving inner content. After decreasing the height and/or width, the
layer will look correct; however, this breaks IE, unbelievably Microsoft
actually completed this correctly according to W3C.org specs.

Reproducible: Always

Steps to Reproduce:
1. Create div with set height, width, background-color, add padding.
2. View using IE and Mozilla, look at difference.
Actual Results:  
Mozilla visibly increased the size of the layer.

Expected Results:  
Mozilla should pad the inner content while keeping the size of the layer the
same. If the size of the layer should change, I would expect to use the height
and width parameters not padding.

Comment 1

[Vaughn]

Attachment: Example of problem

Comment 2

[Vaughn]

Comment on attachment 115809 [details]
Example of problem

View using Mozilla and then use IE 6

Comment 3

[Eric A. Meyer (dead account)]

'width' and 'height' refer to the content-area only; any padding, borders, or
margins are added to those numbers.  IE/Win in fact got this wrong, and just
about every other browser (including IE/Mac) got it right.  Mozilla's behavior
on your testcase looks to me to be correct, although I admit I didn't count the
pixels to see if the red box is 30 pixels taller and wider than the blue ones. 
IE6/Win gets this right in "standards mode" (try changing the DOCTYPE to HTML
4.01 Strict).  Marking INVALID.