I'm having a problem getting an unordered list to indent correctly when there is an image floated to the left of that list.

I have mocked up a page that demonstrates the problem:
  1. Example 1 shows what happens by default when an unstyled unordered list appears next to a floated image. This looks the same in both Firefox 1.5 and Internet Explorer 6.
  2. Example 2 applies a {margin-left: 2em} rule to the li element. This corrects the indent issue in Firefox but has no visible effect in Internet Explorer.
Does anyone have a CSS solution to this problem that will properly indent the unordered list in Firefox and other browsers?

Regards,
Andy Mason