Re: CSS1 comments

Bill Dortch wrote:

> 1. In section 4.1.4 (Floating elements), the example HTML shows a
> floating image defined *before* a paragraph:
> 
>    <BODY>
>      <IMG SRC=img.gif>
>      <P>Some sample text to has no other..
>    </BODY>
> 
> However, the accompanying diagram shows the image bounded on the left
> and top by the paragraph's left and top margins, even though the
> paragraph is not an ancestor.  None of the eight rules given seems to
> account for the image honoring the paragraph's margins.

Either the diagram or the example HTML is wrong.

The diagram is what would occur if the IMG were the first element
*within* P, prior the first text, as in:

    <P><IMG SRC=img.gif>Some sample text to has no other..

The example HTML should cause the IMG to butt to the left margin
of BODY, not P.

How then should P be rendered? Should P wrap around IMG, as with
left-aligned images in HTML? This is in accordance with the spec,
inasmuch as the total width of the child P (margins + borders + padding
+ content) must fill the space between the margins of the parent BODY,
yet cannot overlap the margins of the floated IMG. This interpretation
is also the most versatile. For example, with this style:

   H1 { float: left; width: 20em; margin-right: 2em }
   P  { margin-left: 5% }

this HTML:

   <H1>THIS IS A FLOATED HEADLINE</H1>
   <P>Some text that will wrap around the headline if this
   displayed in a CSS1-capable browser

could display in CSS-capable browsers as:

   THIS IS A   Some text that
   FLOATED     will wrap around
   HEADLINE    the headline if
               displayed in a
      CSS-enabled browser.

and yet still display normally in non-CSS1 browsers.

But if non-floated block elements can wrap around floated ones, what
happens to the margin, padding, and border of the non-floated element?
In the above example, would P's content be indented 5% from the right
outer edge of H1 or would it butt to it? Do P's margin, border and
padding jog around H1, or do they clip to it?

This?

    +-----------------+------------------------------+
    |+---------------+|       margin                 |
    ||+-------------+||   +-------------------------+|
    |||+-----------+|||   |+-----------------------+||
    ||||           ||||   ||+---------------------+|||
    ||||  floated  ||||   |||                     ||||
    ||||  element  ||||   |||     non-floated     ||||
    ||||           ||||   |||       element       ||||
    |||+-----------+|||   |||                     ||||
    ||+-------------+||   |||                     ||||
    |+---------------+|   |||                     ||||
    +-----------------+   |||                     ||||
    |                     |||                     ||||
    |   +-----------------+||                     ||||
    |   |+-----------------+|                     ||||
    |   ||+-----------------+                     ||||
    |   |||                                       ||||
    |   |||                                       ||||
    |   |||                                       ||||
    |   ||+---------------------------------------+|||
    |   |+-----------------------------------------+||
    |   +-------------------------------------------+|
    +------------------------------------------------+

Or this?

    +-----------------+------------------------------+
    |+---------------+|       margin                 |
    ||+-------------+||-----------------------------+|
    |||+-----------+|||----------------------------+||
    ||||           ||||---------------------------+|||
    ||||  floated  ||||                           ||||
    ||||  element  ||||           non-floated     ||||
    ||||           ||||             element       ||||
    |||+-----------+|||                           ||||
    ||+-------------+||                           ||||
    |+---------------+|                           ||||
    +-----------------+                           ||||
    |   |||                                       ||||
    |   |||                                       ||||
    |   |||                                       ||||
    |   ||+---------------------------------------+|||
    |   |+-----------------------------------------+||
    |   +-------------------------------------------+|
    +------------------------------------------------+

The spec needs some clarification.

> 2. In section 5.3.2 ('background', etc.), under the heading
> 'background-position', it is stated that:
>...
> >From my reading of the document, the image would be placed in the
lower
> right corner of the *canvas*, not the table.  If that is the case,
would
> the image be displayed at all times, or only while some portion of
the
> table is visible?

Whatever the reference point for positioning the background, the spec
is clear that the background only appears within the outer edge of the
padding of the element (the only exception being where background is
defined in BODY but not in HTML). The example doesn't clarify this. The
example should be something other than BODY (which may or may not
equate to the canvas since it is a child of HTML), and perhaps the
wording could be "the image is placed relative to the lower right
corner of the canvas, and the element's background is effectively a
window through which the fixed image is visible." 

> 3. A general comment:  I'd like to see the "float" syntax extended
> beyond the current left/right, to allow arbitrary placement of
floating
> elements relative to their parents, with both absolute and percentage
> specification of offsets.

That would be nice. A line of text would then continue its flow
on the other side of the element if possible.

Maybe float could take an optional offset, as in float: left 20%.
Another possibility is float: here, with the element floating at the
position it is in the text and text flow continuing on the other side
of the element.

David Perrell

Received on Sunday, 8 December 1996 16:22:18 UTC