Re: Important Implications on IE5's CSS

[ I am crossposting this to www-html and www-style, since the original
post was to www-html.  All followups should go to www-style. ]

On Thu, 1 Apr 1999 19:03:59 -0500 (EST), "Aristeu E B da Silva"
(aristeu@mandic.com.br) wrote:
> 
> In IE5 the 'width' and 'height' properties of a block level element refers
> to the dimensions of the 'border edge', and in CSS2 they refers to the
> dimensions of the 'content edge'.
> In other words, in IE5 the borders and paddings are drawn 'inside' the
> element, and in CSS2 they are defined to be drawn 'outside' .

There are advantages and disadvantages to both approaches.  The
CSS1/CSS2 approach is the more intuitive approach for replaced
elements, and the IE approach is the more intuitive for non-replaced
elements.  There are things that one can do easily with one of the
approaches and not with the other.  However, *anything* that can be
done through the IE approach can be done using the CSS approach by
inserting an extra element in the markup.  (This is not elegant, but
it works.)  For example, if you want a box with outer width 50% of the
page, you can make it with 2 divs, with classes outer and inner:

div.outer { width: 50%; }
div.inner { border: .5em solid black; padding: 2em; }

The reverse does not apply since one cannot size a parent to fit its
children (at least in correct CSS implementations).

However, in the context of the cascade, where borders and padding may
be defined in a different stylesheet from the one in which the width is
given, the CSS approach is more flexible, since it allows authors to
specify how much room the content must occupy.   I think this is the
best argument for the CSS approach.

> I believe that there is at least two things to think about.
> 
> The first is that, if nothing is done quickly, we will end up having to
> write two different style sheets to equivalent user agents (browsers).

This is a known problem.  The WSP urged Microsoft to fix this bug in
IE5 [1].  It is also noted in [2] and [3].
 
> The second, and maybe shocking thing, is that IE5's is not only a better
> implementation but it is the correct one. The content edge approach besides
> being much more difficult to the user does not allow, with the current
> technology, to do a simple thing like for instance:
> Horizontally align two variable-width boxes that uses fixed (and greater
> than zero)  borders and paddings. When the overall width changes, the
> necessary percentage width of the boxes would need to change too, if you
> wish to maintain the horizontal alignment.

See above.  It is possible.  The CSS approach is more powerful and
more flexible, although occasionally more difficult.

> For those involved or interested in CSS I have published a discussion at:
> 
> http://pessoal.mandic.com.br/~aristeu/boxacidtestIE5corrected/

The third error you point out in the boxacidtest is incorrect (that is,
the boxacidtest is correct).  The DD has a set height, and if its
contents are larger than that height, they should overflow rather than
expand it.  (This was not completely clear in CSS1, but it is in CSS2.)

The first error is also generally considered incorrect (again, the
error).  The root of an HTML document is the HTML element.  There is
some dispute over whether margins are acceptable on HTML, but there is
no reason they should not be allowed on BODY, since it is within HTML.
HTML is the root element.  (If it weren't, HTML would have to be made
a special case, while XML documents would have the root element be the
root element.  This poses particular problems for HTML-in-XML.)

The second error (for the benefit of those who haven't read the page) is
the width/height issue, discussed above.

David

[1] http://www.webstandards.org/css/winie/#The_box_model
[2] http://webreview.com/wr/pub/guides/style/mastergrid.html
     (I think - I couldn't wait for the whole thing to load.)
[3] http://www.fas.harvard.edu/~dbaron/csstest/winie5.html

-----------------------------------------------------------------
L. David Baron    Freshman, Harvard    dbaron@fas.harvard.edu
Links, SatPix, CSS, etc.  < http://www.fas.harvard.edu/~dbaron/ >
WSP CSS AC                < http://www.webstandards.org/css/ >

Received on Thursday, 1 April 1999 21:02:57 UTC