Have you ever tried to position a list on the right side of a left-floating image? Here is a nearly(?) perfect solution.

Imagine, you have a image on the left and the text is floated around the image with float:left. The text also contains a list (ul, ol) with various list items. Unfortunately the list items are not displayed correctly, e.g. the list image is displayed over the image and a long list item text is not indented.

Your code might look like:

<img src=".." style="float:left; padding-right: 3px" />
<ul>
   <li>abc def</li>
   <li>abc def</li>
   <li>abc def with way too much text along this lorem ipsum a dori dara ulu snnnoooo haha gugus</li>
</ul>

Typically the disc of the list item is displayed over the image, also the indented text for a long li is displayed incorrect (2nd line starts below the disc instead indented)

Here is the CSS code that makes this nice

ul { list-style-position:inside; margin-left: 2px; display: table; }
ul li {margin-left: 13px; text-indent: -12px; }

When you check it with the IE, the indented 2nd line for the third item is displayed incorrectly. So you need a special css file for IE only (if you not already use one):

ul li {margin-left: 19px; text-indent: -18px; }

Include this css file with a IE-selector in your html file:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="my-special-css-for-ie-only.css" />
<![endif]-->