List item clip when positioned next to a floating element

Question

I am currently exploring a bug in the template used on http://www.ecovivo.be/rubriek/food.

Problem: When visiting the link you will notice a large floating image with content on the right. Now this all works fine. But upon activating list-style-type, the list images/numbers clip with the image whereas the text gets properly escaped. Normal margin and padding won't work because the ol and li elements extend in width behind the image.

If someone has encountered this problem or a similar one before please provide some insight.

I have tried:

• Floating the li/ol
• Different cominations of "display" on both image and list.
• Overflow and zoom hacks

Facts:

• Runs on Drupal.
• Content of div.content is generated by a WYSIWYG editor.

So please don't comment on how bad the HTML is.

For debugging purposes I have changed the following:

• Set the opacity of the floating image to 50% to show the ol and li borders.
• The ol and li elements have a left border to illustrate size.

Answer 1

Do you mean to assign list-style-position:inside; to the ol?