Anne van Kesteren

Layout and list items

Now I'm playing with Internet Explorer I discover all kinds of funny things that might help designers, developers and myself. Especially on having layout is opening my eyes. I discovered quite early that you could fix annoying rendering using height:1% and I'm actually almost always using that property in a slightly different way (_height:1%) for my CSS files. However, the concept that was behind it explained in the above mentioned article was not really one I had a clue about.

With some further testing of contenteditable today (see also contentEditable and more on contenteditable), I reached list items. Look at the following document:

<!DOCTYPE html>
<title>Testing layout on list items in Internet Explorer</title>
 li{border:solid black}
  <li style="height:1%">test<br>test</li>

For you convenience I also published it online. The placement of the numbers and the numbering of list items is actually dependent on whether or not hasLayout returns true. Fun stuff.


  1. Another side effect. Look at what happens if you assign "layout" to a <ul> element:

    Posted by Dean Edwards at

  2. IE decides not to generate P elements in a LI. The developers have chosen to insert a new LI on enter and insert a BR on shift+enter.

    To my mind there must be a way to insert P elements in a List Item. I wrote a small document on how browsers should behave.

    In a few days I will rewrite this document and describe the exact behaviour more precise.

    I am curious what other people think of my idea...

    Posted by Jorgen Horstink at

  3. Hey, that explains the design issue we've had for Snelsite Comments...

    Anne, are you not cringing from all this horror?

    Posted by Faruk Ateş at

  4. It sucks (I mean IE, not your testing). It resets the counter and affect the vertical alignment…

    Posted by minghong at

  5. Thats another example of the layout misconception:

    "If a layout element has contents, the layout of its contents is determined by its bounding rectangle."

    Draw a border around any non-layout ul/ol, and you'll see that the bullets/numbers are outside of the boundary, and clipped when the ul/ol gains layout. Sorry bullets, but that's the mission of "layout".

    A margin-left:1em brings them back into view.

    Posted by Ingo Chao at

  6. For browser-specific tests, is it not possible to include a screenshot? I wouldn't normally mind, but I'm on Linux with no access to IE without a restart (and yes, I've tried Wine; I can't get IE to install on it).

    Posted by David House at

  7. Hey Anne, don't really get it anymore here. Why do you use non-standard markup to demonstrate anything weird? Thanks for clarification ;)

    Posted by Jens Meiert at

  8. The borders are basicly the same as in Mozilla, but the "bullets" are more like this:

    1. | test  |
       | test  |
       | test  |
    1. | test  |

    The placement of the bullet is at the bottom of the list item when it has layout. Any list item that has layout will have the number 1, without affecting the rest of the list. If you would put another list item to the list, it would have the number 3.

    Posted by zcorpan at

  9. Jens, which part is non standard? According to HTML 5 this is correct. And as the parts of that "standard" (it is actually a specification, not a standard; URIs are a standard) I used here are basically what is already implemented (also in Internet Explorer) I do not see any problem.

    Posted by Anne at

  10. Here are some nice tests.

    Why can't some of the IE developers just write sensible information about all this, instead of coming up with groundbreaking ideas?

    Posted by Krijn Hoetmer at

  11. Krijn, the problem is that they really believe it made perfect sense, and we believe that it doesn't.

    This little communication problem will be hopefully one of the first things the WASP is talking about with MS.

    Posted by Ingo Chao at

  12. The following fixes the bug numbering bug in OL for IE6, but not for IE5.5:

    li {width:480px; display:list-item;  }

    Does anyone have an improvement on this?

    Posted by Artie at