IE7 - Floated Image Disappears!

Question

Ok. Here's the situation. I am styling a comments section on one of my websites. Here's an example markup:

    <ol class="comments">
        <li>
            <a href="/view/profile/id/2">
                <img src="/images/photo-thumb.gif" alt="johndoe" />
            </a>

            <p class="pad-top"><em>written on  Sunday 2nd of August 2009 12:12:54 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p>
            <p class="pad-top pad-bottom">One more comment :D:D:D</p>
            <div class="clear"></div>
        </li>
        <li>
            <a href="/view/profile/id/2">
                <img src="/images/photo-thumb.gif" alt="johndoe" />
            </a>

            <p class="pad-top"><em>written on  Thursday 30th of July 2009 02:59:48 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p>
            <p class="pad-top pad-bottom">Testing comments lalala<br />
            <br />
            Testing comments lalala<br />
            <br />
            Testing comments lalala</p>
            <div class="clear"></div>

        </li>
    </ol>

And here is how I'm styling it:

.comments li {
    margin-top: 1em;
    padding: 0 1em;
    background: #3a3a3a;
}
.comments img {
    float: left;
    margin: 1em 1em 1em 0;
    border: 1px solid #4f5055;
}
.clear {
    clear: both;
}
.pad-top {
    padding-top: 1em;
}
.pad-bottom {
    padding-bottom: 1em;
}

Everything works great in all browsers except IE7 where the floated image disappears. To demonstrate, here is how it looks in IE8, Firefox etc (that's how it's supposed to look):

http://richardknop.com/pic2.gif

And here is how it looks in IE7:

http://richardknop.com/pic1.gif

Anybody knows how to fix this? I have already tried floating the anchor instead and many other tricks but I can't get it to work correctly in IE7.

Answer 1

Not sure about best practices, but I would put the inside of a div block, then float that block.

I would also add clear:both to the .commments li section of the CSS.

Answer 2

IE7 has some guillotine and BG color bugs, but they're usually associated with using :hover. I don't know if that's what's happening in this case, but the solution is a typical one: give an element layout; specifically, give layout to .comments li.

.comments li {
    overflow: auto;
}

Answer 3

This has worked for me when I came across a similar problem:

img {position:relative;}

Answer 4

Also encountered this problem and found this solution: http://css-class.com/articles/explorer/guillotine/