IE List items with floats and the effects on margins and mysterious spaces

These tests show other IE margins issues, but as can be seen, when a floated element is inside a list item, margins disappear and mysterious spaces appear.

Normal container with vertical padding of 10px

With the next three examples, IE shows correct behavior. The paragraphs' top margin is contained by the containers' content edge since the container has padding.

1a. Paragraph (wrapper with vertical padding)

Space
div floated left

1b. Paragraph (wrapper with vertical padding)

Space

1c. Paragraph (wrapper with vertical padding)

Unordered list item with vertical padding of 10px

For the following examples, each <ul> element has margin and padding of 0 and each <li> element has margin of 0.

With the next three examples, IE shows wrong behavior. With examples 2a and 2b, the paragraphs' top margin has disappeared. With example 2c, the paragraphs' top margin is present, but the mysterious space above the paragraphs' top margin edge has appeared.

Space
Space

Unordered list item with vertical padding of 10px

With examples 3a and 3b, IE shows correct behavior. With example 3c, IE shows wrong behavior since an extra space above the static divs top edge has appeared.

Space
Space

It would appear that there is a difference between the examples with a floated divs as compared to the examples with a floated images as the extra space only appears with the examples with floated images, but it changes when the container does not have padding.

Normal container

With example 5a, IE shows correct behavior, the paragraphs' top margin stick out beyond the container, thus pushing the container down from the grey div by 20 pixels. With example 5b and 5c, IE shows wrong behavior, the paragraphs' top margin pushes the paragraph down by 20 pixels form the floats top edge, instead of the top margin sticking out beyond the container. This goes against the W3C specifications for floats.

CSS2.1 9.5 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.

4a. Paragraph

Space
div floated left

4b. Paragraph

Space

4c. Paragraph

Unordered list item

With example 6a, IE shows wrong behavior, the paragraphs' top margin has disappeared. With example 6b and 6c, IE shows wrong behavior, the paragraphs' top margin pushes the paragraph down by 20 pixels form the floats top edge, instead of the top margin sticking out beyond the container. This goes against the W3C specifications for floats. The mysterious space above the paragraphs' top margin edge has appeared for both the floated div and the floated image.

Space
Space

Unordered list item

With no elements with vertical margin or padding, the mysterious space is still present. The only fix is the usual IE fix, which is to give the container hasLayout. Are you still wondering why the space is there in the first place, just go on wondering because I haven't figured it out yet.

Space
Space

Example 4b, 4c, 5b and 5c show the IE Margin Transference Bug.