OK, for the life of me I can't seem to figure out how to solve this problem.

When an image is given the style attribute float:left and a standard unordered list placed next to it, the bullets appear on top of the image. I have tried margin and padding targeting all the elements I could think of.

Here is a link to an example:
http://dustinturin.com/2.0/test

Additionally, the HTML output is coming from a CMS, so I can't change the output very easily. The image itself will have a class.

Any ideas? This must have a simple solution.

OK, for the life of me I can't seem to figure out how to solve this problem.

When an image is given the style attribute float:left and a standard unordered list placed next to it, the bullets appear on top of the image. I have tried margin and padding targeting all the elements I could think of.

Here is a link to an example:
http://dustinturin.com/2.0/test

Additionally, the HTML output is coming from a CMS, so I can't change the output very easily. The image itself will have a class.

Any ideas? This must have a simple solution.

Also, it is possible to fix the problem by giving the ul element the following attributes --
position: relative;
left: 10px;

But, my sense is that this is not a good or the best solution.

There is no container for the text 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit arcu, interdum in condimentum sit amet, vehicula non orci'.
HTML is mark-up language, means that it can describes with the tag(element) which part of the document.
Example, in the '<h1></h1>' tag, HTML document says browser this is a heading, also like '<p></p>' , it is a paragraph.
You can test with '<p>' tag.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit arcu, interdum in condimentum sit amet, vehicula non orci. </p>

That might be valid.
I'm not expert and I can explain a little and it maybe wrong. Sorry for my language skill.