In the following test a list (ul, red) contains two items (li, green), each containing a float (div, blue) and no other contents. The li and the ul are floated, so each encloses its descendant floats. In IE8b1 the li have an extra vertical space (at the bottom) equal to one line height.

• float one float one
• float two float two

In the following test a list (ul, red) contains an item (li, green) which contains a float (div, blue), and another not floated box (div, yellow). In IE8b1 the li have an extra vertical space (at the top) equal to one line height.

• float float float float float
  after the float

The above problems do not show up in IE7 (though it has similar ones.) They disappear giving display:block to the li (having list-item as default), confirming that they are specifically related to lists.

Test case 1 with li display:block

• float one float one
• float two float two

Test case 2 with li display:block

• float float float float float
  after the float

Similar test cases: IE8b1: extra space with LI containing floats, IE/Win 6–8b1: list items minimum height.

CSS tests home