Why do my list item bullets overlap floating elements

Kamiel_Wanrooij_4174 0
Viewed 97637

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 li { list-style-position: 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?

css html
23 Answers

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.

Kamiel_Wanrooij_41740
annakata_130180

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.

user_2258590

Try the following on your UL tag. This should take care of the bullets overlaying your image and you don't have to mess up your left allignment caused by list-position: inside.

overflow: hidden; 
padding-left: 2em;
user_12672930 
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

margin-left: auto will cause the element itself to be right aligned. Set height and width of the element you want - in my it's a background image in a div inside

user_6135980
Related