W3C home > Mailing lists > Public > www-style@w3.org > June 1997

Re: list-item alignment in CSS

From: Todd Fahrner <fahrner@pobox.com>
Date: Tue, 3 Jun 1997 15:55:12 -0700
Message-Id: <v03102800afba283587b6@[206.245.203.103]>
To: "David Perrell" <davidp@earthlink.net>, <www-style@w3.org>
Cc: cwilso@microsoft.com
At 12:21 -0700 6.3.97, David Perrell wrote:
> Todd Fahrner wrote:
> > The recommendation's ascii-diagrams suggest, however, that lists are
> > formatted by a combination of margin, padding, and border values on
> list
> > container and item elements. It looks like I should be able to do
> what I'm
> > after without the extensions you discuss, though perhaps without fine
> > control of the position of the list-item marker.
>
> I don't see that to be the case. Can you reference the ascii diagram
> you refer to and share the markup you believe would give a list marker
> aligned with the left margin of the parent and the list content
> indented 2 ems?

See http://www.w3.org/pub/WWW/TR/REC-CSS1#block-level-elements for the
diagram. As I look harder, I'm beginning to suspect you're right about my
misapprehension, at least concerning positioning of list-item indents
independently of list-item markers. I am still in the fog over whether the
margin/border/padding onion will be of use for styling "markerless"
definition lists (<DL><DT><DD>).

Can Chris Wilson clarify what he means when he says "This is remedied in
the next beta of Internet Explorer 4.0 (beta 2)." What is "this?"

Here's a shot in the dark at CSS/HTML for the rendering I'm after. First
the CSS/HTML, then the desired (wishful?) rendering in ascii.

---

<STYLE TYPE="text/css">

P	{
	text-indent: 4%;
	margin-top: 0;
	margin-bottom: 0;
}

UL	{
        margin: 0;
        border: 0;
        padding: 0;
		list-style: outside;
}

LI	{
        margin: 0;
        border: 0;
		padding: 0;
        padding-left: 4%;
}
</STYLE>


<P>
This is an indented paragraph. This is another sentence, just to illustrate
what should happen after the line wraps. Here's another just in case.
</P>
<P>
This is another indented paragraph. This is another sentence, just to
illustrate what should happen after the line wraps. Here's another just in
case. This one's in here just for the sake of variety:
</P>
<UL>
	<LI>
	This is a list item. Note that the text, not the marker, is aligned
with the paragraph indent above. As well it should be, because the list
style is OUTSIDE. Outside of what, if not this block?
	<LI>
	This is a another list item. Note that the text, not the marker, is
aligned with the paragraph indent above.
</UL>

---

	This is an indented paragraph. This is
another sentence, just to illustrate what should
happen after the line wraps. Here's another just
in case.
	This is an indented paragraph. This is
another sentence, just to illustrate what should
happen after the line wraps. Here's another just
in case. This one's in here just for the sake of
variety:
  * This is a list item. Note that the text, not
	the marker, is aligned with the paragraph
	indent above. As well it should be, because
	the list style is OUTSIDE. Outside of what,
	if not this block?
  * This is a another list item. Note that the
	text, not the marker, is aligned with the
	paragraph indent above.


---

If the answer to the above is "can't do it", I might settle for this:

<STYLE TYPE="text/css">

P	{
	text-indent: 4%;
	margin-top: 0;
	margin-bottom: 0;
}

UL	{
        margin: 0;
        border: 0;
        padding: 0;
		list-style: inside;
}

LI	{
        margin: 0;
        border: 0;
		padding: 0;
        padding-left: 4%;
}
</STYLE>


	This is an indented paragraph. This is
another sentence, just to illustrate what should
happen after the line wraps. Here's another just
in case.
	This is an indented paragraph. This is
another sentence, just to illustrate what should
happen after the line wraps. Here's another just
in case. This one's in here just for the sake of
variety:
    * This is a list item. Note the alignment
	with the paragraph indent above.
    * This is a another list item. Note the
	alignment with the paragraph indent above.


________________________________________
Todd Fahrner
mailto:fahrner@pobox.com
http://www.verso.com/

The printed page transcends space and time. The printed page, the
infinitude of books, must be transcended. THE ELECTRO-LIBRARY.

--El Lissitzky, 1923
Received on Tuesday, 3 June 1997 18:47:12 GMT

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