title: IE7 - Floated Image Disappears!
body: <p>Ok. Here's the situation. I am styling a comments section on one of my websites. Here's an example markup:</p>
  
  <pre><code>    &lt;ol class="comments"&gt;
          &lt;li&gt;
              &lt;a href="/view/profile/id/2"&gt;
                  &lt;img src="/images/photo-thumb.gif" alt="johndoe" /&gt;
              &lt;/a&gt;
  
              &lt;p class="pad-top"&gt;&lt;em&gt;written on  Sunday 2nd of August 2009 12:12:54 AM by &lt;a href="/view/profile/id/2" class="blue"&gt;johndoe&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
              &lt;p class="pad-top pad-bottom"&gt;One more comment :D:D:D&lt;/p&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/view/profile/id/2"&gt;
                  &lt;img src="/images/photo-thumb.gif" alt="johndoe" /&gt;
              &lt;/a&gt;
  
              &lt;p class="pad-top"&gt;&lt;em&gt;written on  Thursday 30th of July 2009 02:59:48 AM by &lt;a href="/view/profile/id/2" class="blue"&gt;johndoe&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
              &lt;p class="pad-top pad-bottom"&gt;Testing comments lalala&lt;br /&gt;
              &lt;br /&gt;
              Testing comments lalala&lt;br /&gt;
              &lt;br /&gt;
              Testing comments lalala&lt;/p&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
  
          &lt;/li&gt;
      &lt;/ol&gt;
  </code></pre>
  
  <p>And here is how I'm styling it:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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):</p>
  
  <p><a href="http://richardknop.com/pic2.gif" rel="nofollow noreferrer">http://richardknop.com/pic2.gif</a></p>
  
  <p>And here is how it looks in IE7:</p>
  
  <p><a href="http://richardknop.com/pic1.gif" rel="nofollow noreferrer">http://richardknop.com/pic1.gif</a></p>
  
  <p>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.</p>