In the following test cases an UL (green border) contains 3 LI (dotted red outline, 0 margin, 0 padding, list-style-type none), each LI contain a float (blue border).

• 1
• 2
• 3

• 1
• 2
• 3

• 1
• 2
• 3

IE/Win two problems

1. In IE6-8b1, LI (list items) with the default list-item display and some out-of-the-flow content have a sort of minimum height equal to a line height. This is the cause of the staircase appearance of floats inside the LI in the first test case (they stack vertically). In the second test case the LI have display:inline, the problem disappears. In the third test case the LI have display:block, the problem is still present in IE7-.
2. In IE8b1 only, if there is no extra free horizontal space in the container, then the last float does not seem to fit and extra vertical space is created, unless LI have display block. Doesn't occur in the above test cases since the last float has margin-left: -3px. The first two test cases are repeated below without that correction.

• 1
• 2
• 3

• 1
• 2
• 3

A somewhat similar problem in IE8b1: A block contain an inline element containing only a float. The external block and the float have a width, the float fits exactly in the block.

Like the above, with a negative margin right on the float.

Similar test cases: IE8b1: list items vertical spacing problems, IE/Win 6–8b1: list items minimum height.

CSS tests home