Do you see the bullets below? The margin/padding on the bullets are being underlapped by the floated image to the left. Keep in mind that the image and the text are variable since this will be in a CMS.

• I want the bullets next to the li's to be pushed to the right. But I want the p to stay where it is.
• Basically, I want tinyurl.com/ku7cck to look like tinyurl.com/lph2hj (old test page).
• I tried putting li's as "float: left" and ul as "overflow:hidden" to clear. This pushes all the li's to be lined up on left side, even after the image. (Although, IE6 and IE7 don't seem to like this.)
• I tried "clear: left" on the ul, but the pushes the whole list to be below the image with a lot of white space.
• Also tried putting a 50px right margin on the img, but that also pushes over the p. Putting a negative margin on the p won't work because it will screw up later paragraphs.
• Only solution I can think of is to make the li's "display: block" and put a background image of a bullet with some padding, but that doesn't solve the issue if it is an ol there.
• I don't want to add "list-style-position: inside" to the li's, because then the other lines don't left align with the first letter of the first line.
• Must be a JS-free solution.
• Here's the stackoverflow thread from this past summer to see a little bit of old discussion. New discussion started on /r/web_design/.

Help?