Re: list-style-position

Ian Hickson wrote:

> On Fri, 12 Sep 2003, fantasai wrote:
> 
>>I actually ran into this problem a few weeks ago: I was writing
>>a set of instructions [ordered list] for using a tall, narrow
>>control panel whose screen shot I wanted floated to the left of
>>the instructions. The behavior should have been as Leslie
>>describes it in
>>   http://lists.w3.org/Archives/Public/www-style/2003Sep/0023.html
>>Unfortunately, things don't work that way, so I just centered
>>the picture before the list...
> 
> Why doesn't it work like that? UA bugs, or does the spec not do what you
> want?

Both.

Here's a testcase:
http://fantasai.tripod.com/www-style/2003/floatlist.html

I tested Mozilla, Opera, and IEWin. None of them seem to get it
right either per spec or per Leslie's description. They all
overlap the list numbers and the float. Furthermore,
   - Mozilla messes up by shortening the list items' block boxes
     along with their line boxes
   - while the other two mess up by locking the number's position
     with the beginning of the line box instead of the block's
     border.

As for the spec,
   1. http://www.w3.org/TR/CSS21/generate.html#lists
      # outside
      #   The marker box is outside the principal block box. CSS 2.1
      #   does not specify the precise location of the marker box.

   2. http://www.w3.org/TR/CSS21/visuren.html#floats
      # Since a float is not in the flow, non-positioned block boxes  <-*
      # created before and after the float box flow vertically as if
      # the float didn't exist. However, line boxes created next to
      # the float are shortened to make room for the floated box.

      * such as the principal block box of the list item

      (Just as a side note, the phrase "flow vertically" should probably
      not have the "vertically", since that implies there's a difference
      in how these boxes flow horizontally and I don't see anything in
      the spec to support that idea.)

      See also "another illustration, showing what happens when a float
      overlaps borders of elements in the normal flow.", further down in
      that section.

This suggests the rendering
  _____________________
|    .................|.............................................
| 1. :                |Instructions Instructions Instructions      :
|    :                |Instructions Instructions Instructions      :
|    :                |Instructions Instructions Instructions      :
|    :                |Instructions Instructions Instructions      :
|    :                |Instructions Instructions Instructions      :
|    :                |Instructions                                :
|    .................|.............................................
|    .................|.............................................
| 2. :                |Instructions Instructions Instructions      :
|    :                |Instructions Instructions Instructions      :
etc.


Fixing the UA problems described above would give a result that is
correct according to the spec, but incorrect according to common sense.

~fantasai

Received on Sunday, 14 September 2003 00:34:26 UTC