W3C home > Mailing lists > Public > www-style@w3.org > August 2000

Re: Displaying a structure in CSS

From: Matthew Brealey <webmaster@richinstyle.com>
Date: Tue, 08 Aug 2000 11:18:19 +0100
Message-ID: <398FDE6B.1C87@richinstyle.com>
To: ValerieGSharp <ValerieGSharp@netscapeonline.co.uk>
CC: www-style@w3.org
ValerieGSharp wrote:
> 
> > Spowart Gregor writes:
> > > First off, sorry to mail this to the list when it's already been mailed to a
> > > newsgroup.
> > > If anyone can help me with the following problem i'd be very grateful!!!
> > >
> > > I want to display the structure in HTML:
> > >
> > >            A
> > > B    C    D     E
> > > F           H
> > > G
> > >
> > > and have it represented in the following format (or similar) in the HTML:
> > >
> > >  <DIV>A
> > >   <DIV>B
> > >    <DIV>F
> > >     <DIV>G</DIV>
> > >    </DIV>
> > >    <DIV>C</DIV>
> > >    <DIV>D
> > >     <DIV>H</DIV>
> > >    </DIV>
> > >   <DIV>E</DIV>
> > >  </DIV>
> > >
> > > That is : the immediate children of A are B, C, D and E,
> > > the immediate children of B is F and of F is G and
> > > the immediate children of D is H.
> > >
> Add the missing </DIV> before <DIV>C<DIV>, and add the following DIV style, and it
> appears to give the desired result in IE5.0:
> 
>     div {position:relative; float:left; padding-right:10; text-align: center}

But that this is so is completely the result of chance. In particular,
you have floated an element without observing the spec requirement that
such elements have an explicitly set width (although I firmly believe
(see my proposal
(http://richinstyle.com/proposals/floatproposal.html#width)) it should
be removed). Also, you have created an invalid declaration by omitting
the unit from '10'. This declaration should be ignored; you are required
to include 'px'; unfortunately, however, MSIE is stuffed to the gills
with idiot-recovery code, which is not in the least bit helpful (e.g.,
some of the e-mails I get - someone e-mailed me asking why their CSS
worked in IE but not other browsers; it turned out that they had <STYLE 
TYPE="text/css">
<!-- in their external style sheet; if MSIE did not attempt to recover
from this (something that it breaches the explicit requirements of the
established CSS standard in doing), this code would never have made it
onto the web.

Of course Mozilla and Opera are now falling over themselves to emulate
its bugs, but none go quite as far.)

Position: relative of course means that the float behaves like a static
element: (CSS 9.5) 'Since a float is not in the flow, non-positioned
block boxes created before and after the float box flow vertically as if
the float didn't exist'. Therefore Moz and IE are both wrong: the
rendering should indisputably be:

+----+
|A   |
+----+
+----+
|B   |
+----+
+----+
|F   |
+----+
+----+
|G   |
+----+
+----+
|C   |
+----+
etc.

IE is demonstrating its bad implementation of text-align, and both
browsers show us that they have difficulties where the element being
closed is not the previous one - they forget that it is positioned.

-----------------------------------
Please visit http://RichInStyle.com. Featuring:
MySite: customizable styles.         AlwaysWork style 
Browser bug table covering all CSS2 with links to descriptions.
Lists of > 1000 browser bugs         Websafe Colorizer 
CSS2, CSS1 and HTML4 tutorials.      CSS masterclass 
CSS2 test suite: 5000++ tests and 300+ test pages.
Received on Tuesday, 8 August 2000 06:12:28 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:05 GMT