CSS float causing background image to appear incorrectly

Question

I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.

Here is an example: http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra

is there a way to make the bullet appear where is should (i.e. next to the text)?

Answer 1

Try wrapping your list items in a <p> tag, and then give that tag a left margin.

Answer 2

Why do you have div.fig width set to 0 in the html?

<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>

Remove that and the list will float around the image.

Answer 3

In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:

li {
    overflow:hidden;
}

Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)

Edit: Solution if you can change the html slightly

If you have any control over the html, you could perhaps use paragraph tags instead of list items:

p.list_item {
    background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
    padding-left: 11px;
}

However, that would kind of change the semantic meaning of the list items...

Answer 4

Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions