Why do my list item bullets overlap floating elements

Question

I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of the list overlap the floated image.

Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right inside the li itself. So the margin only helps if I make it wider than the image.

Floating the list next to the image also works, but I don't know when the list is next to a float. I don't want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated to the right instead of left of the list.

Setting the list-style-position to inside does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with the line above.

The problem is obviously caused by the bullet being rendered outside the box, the float pushing the contents of the box to the right (not the box itself). This is how IE and FF handle the situation, and as far as I know, not wrong according to the spec. The question is, how can I prevent it?

Answer 1

FYI - your XHTML doctype is not necessarily causing your page to be rendered as XHTML. See this article:

http://webkit.org/blog/68/understanding-html-xml-and-xhtml/

Answer 2

Try list-style-position: inside to change the layout of the bullets.

Answer 3

I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.

Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.

Answer 4

At http://archivist.incutio.com/viewlist/css-discuss/106382 I found a suggestion that worked for me: style the 'li' elements with:

position: relative;
left: 1em;

Where you replace "1em" with the width of the left padding/margin that your list items would have if the float weren't present. This works great in my application, even handling the case where the bottom of the float occurs in the middle of the lists--the bullets shift back over to the (local) left margin just right.