Getting a ul to flow under a floated img

I have noticed that in some cases, the <li> elements in a <ul> will not flow properly under a floated <img>.

Case in point:

[code]
<img src=”image.gif” style=”float:right” />

<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

<ul>
<li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</li>
<li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
<li>text text text text text text text text text text text text text text text text text text text text text </li>
</ul>
[/code]

You will have to play with your window size to see the problem. If the first line of the first <li> element is not below the <img> then none of the <li> element will flow under the <img>.

I assume that each individual <li> element is a block and will not flow under the floated <img> but I would also like to correct this if possible.

Also in #CSS _↴