W3C home > Mailing lists > Public > www-style@w3.org > November 2008

[CSS2.1] Position of list-item markers

From: Saloni Mira Rai <salonir@microsoft.com>
Date: Wed, 12 Nov 2008 11:32:28 -0800
To: "www-style@w3.org" <www-style@w3.org>
CC: Sushanth Rajasankar <Sushanth.Rajasankar@microsoft.com>
Message-ID: <E8245DDD23CF8443A20CDFABD553C2FD41570AAB4D@NA-EXMSG-C112.redmond.corp.microsoft.com>

We need a clarification on positioning the marker for list-items in the scenario where list-item content is not right next to the principal box edge.

Section 12.5 [http://www.w3.org/TR/CSS21/generate.html#lists] states
"An element with 'display: list-item' generates a principal box for the element's content and an optional marker box as a visual indication that the element is a list item."

And then in list-style-position [http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position] we have
"outside The marker box is outside the principal block box. CSS 2.1 does not specify the precise location of the marker box. "

Principal boxes defined here: http://www.w3.org/TR/CSS21/visuren.html#principal-box

Block-level elements (except for display 'table' elements, which are described in a later chapter) generate a principal block box that contains either only block boxes or only inline boxes<http://www.w3.org/TR/CSS21/visuren.html#inline-box>. The principal block box establishes the containing block<http://www.w3.org/TR/CSS21/visuren.html#containing-block> for descendant boxes and generated content and is also the box involved in any positioning scheme. Principal block boxes participate in a block formatting context<http://www.w3.org/TR/CSS21/visuren.html#block-formatting>. Some block-level elements generate additional boxes outside of the principal box: 'list-item' elements. These additional boxes are placed with respect to the principal box.


The above text states that the marker should be placed outside of the principal box of the List-item element.
However other browsers aren't matching this and we just want to clarify whether this is a bug, or whether the spec needs to change.

Scenario #1 - List-item is immediately preceded by a float (left). The float pushes the list-item content to the right. According to the rules above the marker should be outside of the principal box and to the left of the float.
Opera and Safari all put the marker to the right of the float and next to the text.
Firefox puts the marker on the float.
IE8 puts the marker to the left of the float.

Scenario #2 - List-item has text-align set to center. Should the marker be next to the text or outside the principal box?
Firefox, Opera and Safari put the marker right next to the text, within the border of the list-item
IE8 puts the marker outside the list-item.

Saloni Mira Rai
IE Developer Experience PM

Received on Wednesday, 12 November 2008 19:33:58 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:31 UTC