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

List item and marker box layout - Spec needs example / clarification for nested block scenario.

From: Sushanth Rajasankar <Sushanth.Rajasankar@microsoft.com>
Date: Sun, 16 Mar 2008 15:37:37 -0700
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <F15594C498116244B8AA3EA25B76DBD3708B679EE5@NA-EXMSG-C115.redmond.corp.microsoft.com>
When a list item with list-style-position is set to outside and contains not text but a block,
I see popular browser behavior is to have the list marker aligned with the baseline of the inner most block's first line.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
    <style>
    .LI { display:list-item; }
    .OUT { list-style-position:outside; }
    </style>
</head>
<body>
    <ol class="OUT">
        <span class="LI OUT">Item #1. Text Text Text Text Text Text</span>
        <span class="LI OUT"><div style="border:10px solid green;">TEXT</div></span><!-- This is empty list item #2 -->
        <span class="LI OUT">Item #3. Text Text Text Text Text Text</span>
    </ol>
</body>
</html>

[cid:image001.png@01C8877B.3DE7AEA0]

The spec however clearly states :
http://www.w3.org/TR/css3-lists/#markers
9. Markers: The ::marker pseudo-element
Marker boxes have padding, borders and margins, just like inline-block elements. The marker box will be vertically aligned with the first line of content in the principal box, as specified by the pseudo-element's 'vertical-align' property. The marker box participates in the height calculation of the principal box's first line box. Thus, markers are aligned with the first line of an element's content. If no first line box exists in a principal box, the marker box establishes its line box alone."(The first line of a principle box is the one matched by the box's '::first-line' pseudo-element.)

Since the element matched by "::first-line" pseudo element is empty in my case, I would expect a blank line and that the div follows afterwards. This is not the observed behavior.
More interesting is the observed behavior in list-style-position:inside scenario.

[cid:image002.png@01C8877B.3DE7AEA0]

Clearly this behavior needs to either be documented in the spec or if the spec is still accurate, it would be
helpful to have examples to prove its point.

Thanks,
Sushanth.



image001.png
(image/png attachment: image001.png)

image002.png
(image/png attachment: image002.png)

Received on Sunday, 16 March 2008 22:38:28 GMT

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