floating image and bullet lists -- driving me crazy!

[tustind]

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.

[tustind]

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.

[webmaven]

i tried modifying your code as follows:

<img src="http://www.adiumxtras.com/images/pictures/chuck_norris_random_fact_generator_6_3957_2224_image_2561.jpg" style="float: left;margin-right:40px;" />

and it seemed to work in both explorer and Firefox.

[tustind]

i tried modifying your code as follows:

<img src="http://www.adiumxtras.com/images/pictures/chuck_norris_random_fact_generator_6_3957_2224_image_2561.jpg" style="float: left;margin-right:40px;" />

and it seemed to work in both explorer and Firefox.

That works for the bullets, but if you add some non-bulleted text then you once again have the bullets sitting to the left of the text.

see http://dustinturin.com/2.0/test for an updated example.

[ko ko]

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.