124085 - CSS1 poor implementation for absolute sizing

Status: VERIFIED INVALID

(SeaMonkey :: General, defect)

Description

[Don Eitner]

The CSS1 implementation in Mozilla 0.9.7+ (build 2002012508) has problems with
absolute sizing.  Specifically, try an HTML DIV with position set to absolute
and a width set to 50% -- this should ALWAYS be 50% of the browser window width.
 Now add to this very same DIV a setting for padding of 2px (2 pixels of padding
inside the DIV area).  The DIV will now display wider than the 50% you have
specified.  Trying to emulate HTML tables using only Cascading Style Sheets
therefore can result in areas overlapping one another and create a poor user
experience because the site developer cannot force two columns each at 50% of
the browser's width to actually only use 50% each.  They use 50% + 4px (2 on the
left and 2 on the right).

As far as I know, this has always been a problem, not just with this build of
Mozilla but with all builds.  My concern is that if I am clever and "fix" the
display issue, a future release of Mozilla will internally fix it and then my
home-spun fix will look ugly.  Remember, CSS is a way to separate the visual
layout from the HTML code and to allow site developers to create attractive
pages which are compatible with a wide variety of browsers.  This may seem like
a trivial matter, but for those who do professional web site design it can mean
the loss of a client.

Comment 1

[Richard Brodie]

Padding should be and is outside of the width of the DIV; it's not a bug in 
Mozilla. There are workarounds about for other browsers that get this wrong. 
see e.g. http://www.tantek.com/CSS/Examples/boxmodelhack.html

Comment 2

[Christopher Hoess (gone)]

INVALID per comment #2.

Comment 3

[Christopher Aillon (sabbatical, not receiving bugmail)]

> Remember, CSS is a way to separate the visual layout from the HTML code and
> to allow site developers to create attractive pages which are compatible
> with a wide variety of browsers.

We know what CSS is.  Better than you do it appears.  That comment was unnecessary.

Verifying this is invalid.  Note this is only a bug in Windows IE versions
through 5.5 inclusively.  AFAIK, IE 6 has this fixed in standards mode.  Mac IE
responds the same way we do, as does Opera.  I don't know of any other browser
that gets this wrong, though there may be others.

Also note, we follow the CSS2 spec in this regard, not CSS1, although that has
no effect on what you are claiming.  Both note that the padding, border and
margin are un-affected by what the width property is setting (though the
terminology may leave a bit to thought).  Both tell you precisely what the width
property sets, and I link to where it defines "element width" in CSS1, and
"content width" in CSS2.  So for reference:

CSS1: http://www.w3.org/TR/REC-CSS1#width
      http://www.w3.org/TR/REC-CSS1#formatting-model
      
CSS2: http://www.w3.org/TR/REC-CSS2/visudet.html#the-width-property
      http://www.w3.org/TR/REC-CSS2/box.html#content-width

In addition, I'll re-iterate for you the link that was provided earlier on how
to work around WinIE's bug.

http://www.tantek.com/CSS/Examples/boxmodelhack.html

And an interesting note for you: Tantek Çelik (the guy who wrote the box model
hack page above) is a Microsoft employee.