Re: Float overflowing behavior!

>>I have yet to see a "CSS layout" in which someone _wanted_ a
>>"width:100%" anything; usually the present of paddings and
>>borders makes such constructs overflow their parents and look
>>ugly (except in >IE/Windows).
>
>True enough. But one still needs that for tables. As for the rest
>of the discussion, using divs and spans only is just about as
>abominable an idea as possible. Following that logic, we might as
>well send everything as pictures.

Lets get this thread back to the subject and end this *epical*
dispute on the (IN)CORRECT way to use the W3C recommendation.

To summarize an element can be made float inorder to achieve the
6 cases seen in this thread. The current behaviour of a float *is*
only 100% correct for the first case -- the article with terms or
small pictures at the left or right edge of the text -- the
following attributes have been proposed in order of proposing:


 Name: float-overflow
 Value: contain | overflow
 Initial: overflow
 Applies to: block-level, non-replaced elements
 Inherited: no
 Media: visual


 Name: float
 Value: [top | bottom]? [left | right | center] | none | inherit
 Initial: none
 Applies to: block-level, non-replaced elements
 Inherited: no
 Media: visual


 Name: float-bounds
 Value: [ <selector> | none ] {1,4}
 Initial: none *
 Applies to: block-level, non-replaced elements with float
             other than none
 Inherited: no
 Media: visual


 Name: float-contour
 Value: contour | box | inherit
 Initial: box
 Applies to: block-level, non-replaced elements with float
             other than none
 Inherited: no
 Media: visual


For all these properties the 'Aplpies to:' is wrong. When defining
them this way they cannot be aplied to an image since images are
replaced elements.


 Name:        float-overflow
 Value:       contain | overflow
 Initial:     overflow
 Applies to:  all but positioned elements and generated content
 Inherited:   no
 Percentages: N/A
 Media:       visual


 Name:        float
 Value:       [top | bottom]?[left | right | center] | none | inherit
 Initial:     none
 Applies to:  all but positioned elements and generated content
 Inherited:   no
 Percentages: N/A
 Media:       visual

 The box floats to the indicated position within the bounding
 box for the float (see the "float-bounds" property).  If neither
 "top" nor "bottom" is specified, the vertical position is
 determined by the position of the line box (or containing block,
 if there is no line box) in which an inline element of zero height
 and zero width at the same location in the source would have been
 generated, and the "vertical-align" property of the float. The
 height of the line box is not affected by the presence of the float.


 Name:        float-bounds
 Value:       [ <selector> | none ] {1,4}
 Initial:     none *
 Applies to:  all but positioned elements and generated content,
              who have the float atrribute set other than none
 Inherited:   no
 Percentages: N/A
 Media:       visual

 The values of this property specify the elements whose content
 edges form the top, right, bottom and left boundaries of the
 container for the float.

 <selector>
 The boundary is formed by the appropriate content edge of the
 nearest ancestor of the floated element which matches the
 selector. (If no ancestor matches the selector, "none" is used.)

 none
 No boundary is specified for the relevant edge of the container
 of the float.  (If this is specified for a boundary to which
 the element floats, the parent is used for a left or right
 boundary; the root element is used for a top or bottom boundary.)


 Name:        float-contour
 Value:       contour | box | inherit
 Initial:     box
 Applies to:  all but positioned elements and generated content,
              that have the float atrribute set other than none
 Inherited:   no
 Percentages: N/A
 Media:       visual

 The values of this property gives a hint in how text and other
 content should flow around floating elements.

 contour
 The surrounding content flows around the contour of the content
 within the floating element. The contour of the floating element
 can be found by the following set of rules:
 - for images
   Taking the aplha cannel of the image data
 - for texts
   The width of the line boxes
 - for other types of content
   The countour has the same shape os the box

 box
 The surrounding content flows around the edges of the containing
 box of the floating element.

Christian


-----
Microsoft products are susceptible to a large variety of viruses, worms, and other fauna.

Received on Saturday, 17 August 2002 15:38:19 UTC