Re: Displaying a structure in CSS

Matthew Brealey wrote:

> 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).

I suppose I should have mentioned that the style was somewhat dubious :)

I too cannot see why the spec should require the width to be set
explicitly.

> Also, you have created an invalid declaration by omitting
> the unit from '10'.

You're right, of course. (The padding was just prettifying anyway)

>
> Position: relative of course means that the float behaves like a static
> element:

Since when?
Static is non-positioned.
Relative, absolute, and fixed are positioned.

CSS 9.3.2: "An element is said to be positioned if its 'position'
property has a value other than 'static'. "

(BTW, CSS 9.5.1 says of 'float': "It may be set for elements that
generate boxes that are not absolutely positioned.")


> (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'.

Since the block boxes created before and after are positioned, the above
doesn't apply.

....except, I think this is a red herring....

i.e. relative positioning is probably spurious - 'float' in block boxes
before and after should probably take them all out of the natural flow,
and float them relative to their containing blocks.


> Therefore Moz and IE are both wrong: the
> rendering should indisputably be:
>
> +----+
> |A   |
> +----+
> +----+
> |B   |
> +----+
> +----+
> |F   |
> +----+
> +----+
> |G   |
> +----+
> +----+
> |C   |
> +----+
> etc.
>

CSS 9.5: "Any floated box becomes a block box that is shifted to the
left or right until its outer edge touches the containing block edge or
the outer edge of another float. "

The way I read it, floated blocks within the same containing block
should sit side by side where space permits.


>
> 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.

Didn't quite follow that one...

> -----------------------------------
> 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.

--
Regards,
Val Sharp - Edinburgh

Received on Wednesday, 9 August 2000 13:20:51 UTC