Re: list-item alignment in CSS

Todd Fahrner wrote:
> I understand the properties of the display types "block" and "inline"
(and
> of course "none"), but am confused about "list-item". I can't seem to
> influence the indent on lists in either of the mass-market 4.0b
browsers. I
> can't tell whether my faulty understanding of the formatting model is
to
> blame, or whether I've fallen into a browser implementation hole.

I think you've fallen into a serious shortcoming of the list-item
display type. The list-style-position property only accepts the keyword
values "outside" and "inside". Why not length and percentage (of
element width)? This addition would give you what you want.

But I'd still think "list-item" an unnecessary
HTML-compatibility-kludge.

There has been discussion here about adding :before and :after
pseudo-elements to CSS. IMO, we also need a 'block-indent' text
property.

The 'block-indent' property would be a more general version of the
'list-style-position' property, applicable to any block element. With
the block-indent property and the :before pseudo-element, list items
could be defined entirely in terms of more general CSS properties,
eliminating the need for a separate list-item display type.

The block-indent property would act as a secondary margin that does not
affect floated child elements as margin does. For example, here is a
typical unordered list specified with block-indent:

  UL LI        { block-indent: outside }
  UL LI:before { float: left;
                 content: disk }

The 'outside' keyword indicates that the content should be to the right
of any left-floated before: pseudo-element, corresponding to typical
default browser behavior. You could alternatively specify any CSS
measure, such as ems, points, or percentage of element width.
Speculating that your example uses a 2 em indent on paragraphs, the
declaration would be:

  P            { indent: 2em }
  UL LI        { block-indent: 2em }
  UL LI:before { float: left;
                 content: lower-alpha "." }

(The above also speculates treatment of "lower-alpha" as a general
automatic counter keyword for sibling elements.)

Note that it would not be necessary to specify any caveats regarding
the use
of 'block-indent' and ':before' with list-items because it can be
assumed that list-items already have _default_ block-indents and
:before pseudo-elements that are being overridden. Exceptions are
reduced and the formatting model is simplified.

David Perrell

PS: Your example is a rare case where background sound might be
appropriate.

Received on Tuesday, 3 June 1997 14:06:57 UTC