Adding padding to a relatively positioned div increases its width

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
RESOLVED INVALID
17 years ago
17 years ago

People

(Reporter: Malte S. Stretz, Assigned: Pierre Saslawsky)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

17 years ago
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.2) Gecko/20010628
BuildID:    2001062815

Check out the sample URL. The red box (a div) should not be that large  (it's
width is 60% and it's left position is 40%) and it should not extend the
surrounding td. The div is positioned relatively and has a padding assigned. The
div's width is extended by the size of the padding.
If it WORKSFORYOU, try
http://www.msquadrat.de/hosted/.bugbox/mozilla/mozilla-2001062815-testcase-2001070501.png
Works fine in Opera 5.11 and IE 5.something.

Reproducible: Always
Steps to Reproduce:
Create a block element (I tested only div) with a relative position and size
(hmmm... does this only happen when you use percentages as coordinates? too
tired to check it out) and a (inner) padding. See what happens to it's size...

Actual Results:  The div was larger than I told it to be.

Expected Results:  Mozilla should have rendered it smaller ;-) Especially it
should not have added the padding to the width (because padding is a inner
distance).
actually, "width" does not include "padding" (see
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions).

However there does seem to be a positioning bug here....  "left" seems to be
determining the position of the _border_, not the edge of the content area.

setting status to NEW so hixie will take a look.
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows 2000 → All
Hardware: PC → All

Comment 2

17 years ago
Removing the apostrophe in "it's" to satisfy the pedant in me.
Summary: adding a padding to a relatively positioned div increases it's width → Adding padding to a relatively positioned div increases its width
(Reporter)

Comment 3

17 years ago
Boris: You're right, 'width' doesn't include the padding. I had not read the description of 'width' attentive enough before I bloated into here. (BTW, who declared 'width' to work this way? That's stupid, I think. When I assign a width on a block element I expect it to change the box-, not the content-width. But that's off-topic :o)
BUT: According to http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths the properties 'min-width' and 'max-width' affect the "box widths" and not the "contents widths". So http://www.msquadrat.de/hosted/.bugbox/mozilla/mozilla-2001062815-testcase-2001070601.html should do the trick, I think. But it doesn't. (To be true: Don't even Opera and the IE do render this one correctly. *g*)

Alex: Thanks :o)
(Reporter)

Comment 4

17 years ago
...and, as you can see, Opera doesn't support the 'wrap' attribute on 
'textarea's. Ok, it's not included in the HTML4-Spec, but it would be cool if 
it were. But that's really not your fault ;)
Alex, as far as I know 'min-width' and 'max-width' only affect the 'width' of
the content, not the size of the box.  See
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata, the erratum for
section 10.3.3 in support of this...
OK.  I've read the spec some more and this looks invalid.

The positioning "bug" I saw is actually necessitated by the following erratum
(from http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata ):

  The properties 'top', 'right', 'bottom', and 'left', incorrectly refer to
  offsets with respect to a box's content edge. The proper edge is the margin
  edge. Thus, for 'top', the description should read, "This property specifies
  how far a box's top margin edge is offset below the top edge of the box's
  containing block."
Marking invalid since we seem to be doing this correctly... What you probably
want here is "width: auto" and setting the left and right margins to 0 explicitly.
Status: NEW → RESOLVED
Last Resolved: 17 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.