List next to a float image

HTML & CSS
1

Hi,

I am having a problem with a list (<ul>) that is next to an image that is float:left. When a list item is next to an image, the bullet and the image overlaps.

I can give margin/padding to those items that are next to the image, but I do not know which which list items will be next to the image and which list items will be below the image. The text above the list is dynamic.

Here is a link to an example of the problem.
http://www.rayflies.com/listExample.html

Thanks and greatly appreciate the help.

2

put a right margin on your pic, or a left margin on your <li> element

3

The right margin will get the bullet to show. But the bullet points is not lined up with the rest of the text. I also don’t know exactly where the list will start since the the text will be dynamic. So if I give margin/padding to the <li>, it will also change the styles for the list items below the image. All the list <li> are within the same <ul>.

4

I think I know what you’re after. I’m not totally sure how you’d achieve it. A list item marker is defaulted to “outside”. Maybe set it to “inside” then it should line up with the text, and eliminate the need for borders or padding. Check it out at http://www.w3schools.com/css/css_list.asp
And why a floatImg declaration in your css? It affects nothing.

5 
<ul style="list-style-position:inside; margin-left:-35px">
6

you’re awesome jake. That was exactly what i wanted to do. The floatImg class does nothing. I was trying to put up an example as fast as possible and forgot to delete it. Thanks again!