List Item Background Image - Neighbor Floated Content Overlaps

Question

Hi all,

I've used list item background images for customized bullets hundreds of times in the past, and somehow never came across this issue.

Essentially, I have an IMG floated left of the Unordered List. The bullet background images are set to top-left of each LI. However, the floated image is covering the bullets, as the browser is treating the list as if it's still full width (as if the floated image almost isn't there).

It's a bit hard to explain. So here is a screenshot with notes. http://img695.imageshack.us/img695/1328/cssquestion.jpg

Here are some code snippets (sorry, can't upload to a server at the moment):

<h2>About Us</h2>
            <img src="image.jpg" class="img-left" />
            <h3>Heading</h3>
            <p>Text</p>

            <ul>
                <li>List Item One</li>
                <li>List Item Two</li>
                <li>List Item Three</li>
            </ul>



    ul {
padding: 0; 
margin: 0;
}
    ul li {
background: url(../images/bg-main-bullet.gif) top left no-repeat; 
list-style: none; 
padding: 0; 
margin: 0;
}

.img-left {float: left; margin: 0 19px 0 0;}

Does anyone have any ideas how to achieve my desired result?

Any tips or input is greatly appreciated! Thanks

Answer 1

The default style position for lists is "outside" meaning that they appear outside of the related padding or margin. Presumably you have some margin or padding on the list or list items, pushing them past the right side of that graphic.

The fix is to set your list style position to "inside". Try adding this to your stylesheet (customize the specificity of ul to fit your needs):

ul{ list-style-position: inside; }

Answer 2

You need to also float the unordered list itself or set it's padding to accommodate the floated image.

So if you're floated image is 300px wide then you will want to do:

ul { float: left; }

or...

ul { padding-left: 300px; }

What currently happens is your li's bounding box begins behind the floated element. So we need to have it's parent element contain these bounding boxes. Floating the list will do this but setting the padding will do this as well.

Caveats of floating the list are obvious. Caveats of setting the padding is that if you wanted the list to flow beneath the image they will not. They will always be indented. However, for a bulleted list I would think it's best that the bullet points always be left aligned. So the padding solution is the one I would recommend!