96772 - Inclusion of width: 100% causes content to overextend bounding container

Status: VERIFIED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Josh Gough]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.3+)
Gecko/20010811
BuildID:    2001081108

The specified URL shows an attempt at a cross-browser menu with rollovers done
solely with CSS. However, behavior is different in IE and Mozilla, and with
certain combinations of CSS styles, Mozilla overextends a child element's
content outside the bounds of its parent width which has been explicitly set
with the CSS width style. This summarizes some of the differing behaviors seen:

*  In Mozilla, proper behavior occurs when only display: block is specified as
part of the given A tag's style.
* In IE, proper behavior occurs only when display: block and width: 100% have
been specified, but only after a style rule with width: 100% has been disabled
one time (which seems to not disable the width behavior, but does all other rules).
* In Mozilla, the inclusion of width: 100% in conjuncton with padding causes a
child element's content to extend past the border of its parent.




Reproducible: Always
Steps to Reproduce:
1. Run your mouse over the links in the menu on the URL.
2. Repeat in IE.
3. Click the button to change the stylesheet and try again...

Actual Results:  When the "links" label is darkblue (default)
The style rules have both width: 100% and display: block in this test. Also note
that when this page loads, the third style sheet is disabled.

    * Mozilla: the content of the links should extend beyond the border of the
containing div in Mozilla.
    * IE: the content should stay in place, but the text does not align to the right
      Above is IE 5.0 behavior.
      IE 5.5: Proper behavior,
      IE 6.0: Seemingly proper, yet articles is underlined and the box is too wide.

When the "links" label is light blue (after first toggle)
The style rules only have display: block in this case.

    * Mozilla: proper behavior occurs. This is without width: 100% in the style
rules.
    * IE: proper behavior occurs. This, after the toggle.
      Above is IE 5.0 behavior.
      IE 5.5: Proper behavior,
      IE 6.0: Seemingly proper, yet articles is underlined, but the box is proper.



Expected Results:  With display: block set in the rule for the A tag, I expect
that when I move the mouse over either the text or the white space that the
background color will change and align the text to the right with a 15px padding
from the right edge. In Mozilla's case, I don't know why having width: 100%  in
the style rule should make the content buldge out like it does. As for IE, it
just acts very strangely under the various conditions.

There are two other links at the bottom of the page which relate more to IE's
behavior.

Comment 1

[Boris Zbarsky [:bzbarsky]]

> I don't know why having width: 100%  in the style rule should make the content
> buldge out like it does

Because "width: 100%" sets the width of the content area of the element. The
total width of the element is content+padding+border+margin.  See 
http://www.w3.org/TR/REC-CSS2/box.html

Try something more like:

selector { margin-left: 0; margin-right: 0; width: auto; border-left: whatever;   
           border-right: whatever; padding-left: whatever; padding-right:
           whatever }

width:auto is definitely what you want. If IE mis-renders that, that's an IE bug....

Marking invalid since we're displaying this per spec.  Please reopen if you have
a testcase that shows us rendering incorrectly.

Comment 2

[Marcus Campbell]

*** Bug 141192 has been marked as a duplicate of this bug. ***

Comment 3

[Thomas Andrews]

If width in CSS represents the content, then why doesn't this bug occur when I 
set width="250" explicitly?  Shouldn't the second table in my example:

     http://thomaso.best.vwh.net/bridge/paddingbug.html

look the same as the first?

Or does width="250" behave differently from width="100%" when the current cell 
is width 250?

Comment 4

[Thomas Andrews]

Never mind - my CSS was broken so that the 250pt cell wasn't being formatted 
properly.  Once I fixed it, I got behavior which fits what you've described.

Comment 5

[Marcus Campbell]

Verified.