Implementing Cascading Style Sheets, level 1

Rendering list-item properties

The CSS1 spec is unclear as to how lists should be rendered when the list-style-position is "outside". Does the left margin of an LI element determine the list-marker position, as the ascii graphic implies? Or does the left margin determine the left edge of the content, with the list-marker 'hung' off to the side? The latter interpretation is authoritatively correct, and the following shows how a list should be rendered vs. how your browser renders it.

The cyan gridlines are spaced at 20 pixel intervals.

The CSS1 style declaration for unordered lists:

How the list should be rendered:

	The parent UL element has an aqua background, the LI elements have an orange background. There should be a 6 pixel space above, below, and to the right of the entire group of LI element blocks because there is 6 pixels of top, bottom and right padding in the parent UL element. There should be a 6 pixel space between the LI element blocks because there is a 6 pixel top margin on all LI elements except this one, which is of class "first" and has the top margin specified as 0 pixels. The background color of the parent UL element should show through the margins.
	The left edge of the LI elements should be 40 pixels to the right of the parent UL element's left edge because LI has a left margin of 40px and UL has a left margin and padding of zero.
	The background of the LI elements should extend all the way to the inside edge of the parent element's right paddding because LI is a block-level element. The background of the LI elements should extend only to the edges of the text at the left, top, and bottom, because there is no padding on the LI element.
	The background of the list-item marker should be transparent such that the background of the parent element shows through.
	The list-item marker's horizontal position is undefined. Your browser can put it wherever it wants to.

(The above list is simulated using a table and your browser may not render it precisely as specified.)

How your browser renders the list:

• The parent UL element has an aqua background, the LI elements have an orange background. There should be a 6 pixel space above, below, and to the right of the entire group of LI element blocks because there is 6 pixels of top, bottom and right padding in the parent UL element. There should be a 6 pixel space between the LI element blocks because there is a 6 pixel top margin on all LI elements except this one, which is of class "first" and has the top margin specified as 0 pixels. The background color of the parent UL element should show through the margins.
• The left edge of the LI elements should be 40 pixels to the right of the parent UL element's left edge because LI has a left margin of 40px and UL has a left margin and padding of zero.
• The background of the LI elements should extend all the way to the inside edge of the parent element's right paddding because LI is a block-level element. The background of the LI elements should extend only to the edges of the text at the left, top, and bottom, because there is no padding on the LI element.
• The background of the list-item marker should be transparent such that the background of the parent element shows through.
• The list-item marker's horizontal position is undefined. Your browser can put it wherever it wants to.

Comments/suggestions appreciated. Email David Perrell