IE7 li with image and text issue - Text . Almost working.

Question

I'm using an unordered list.

With an image to the left and text to the right.

I only noticed today that IE7 was displaying this so badly that it wasn't even acceptable. Woops for not realising sooner.

I have the given the image a class and the text wrapped in a seperate div.

<ul>
<li><a href="domain"><img src="http://www.domain.com/img.jpg" alt="img class="footer-thumb" width="40px" height="40px" /></a>
    <div class="recent-post-content">
    <p>day date time</p>
    <p><a title="Content title" href="http://www.domain.com/contentitle &raquo;</a></p>
    </div></li></ul>

What's happeninig so far is that it is perfect in every browser except in IE7 where the images are exactly where they should be but the class "recent-post-content" is all pushed up one exactly one image ([li] height) above so the last image doesn't have any text beside it and the first image ([li]) has its "recent-post-content" above it.

I guess it's something simple but after getting this far on my own I thought it best to try and get some advice to fix the last little bit.

Any ideas?

Thanks

Answer 1

Fix

<img src="http://www.domain.com/img.jpg" alt="img class="footer-thumb" width="40px" height="40px" />

to

<img src="http://www.domain.com/img.jpg" alt="img" class="footer-thumb" width="40px" height="40px" />

and fix

<a title="Content title" href="http://www.domain.com/contentitle &raquo;</a>

to

<a title="Content title" href="http://www.domain.com/contentitle"&gt;&amp;raquo;&lt;/a&gt;

and IE will behave.