I found a very strange rendering bug in IE7 today. It was particularly strange as it showed no symptoms in IE6. Firefox & Safari (as is usually the case) displayed it perfectly.

Here’s the (abridged) code for the section I was working with and the associated screenshot of the problem. Basically, IE7 was adding a 10-pixel padding to numerous elements proceeding down the page.

   <h2 class="BlueBar">Details of your loan</h2>
   <div class="Full">
     <h3>About this loan</h3>
     <table summary="Details of this loan" cellspacing="0" class="AboutLoan">
       <tbody>
         <tr class="Odd">
           <th>Loan amount</th>
           <td>£2,500</td>
         </tr>
       </tbody>
     </table>
   </div>

As you can see the <h2> with the blue background and the <table> were totally unrelated, however IE7 deemed it fitting to add the gap to the left of all of the elements, in the case of the <h2> as left padding.

After much experimentation I tracked the problem down to an unrelated comment further up the page. Whilst I’m used to comments bugs in IE6 it was a new experience to find such a basic rendering error in IE7, given that my general experiences with CSS coding for the browser has been for the most part positive.

I’ve not had time to properly diagnose the problem or the specific conditions that cause it to occur but the short lesson for today is that IE7 shares comment-sensitivity with it’s problematic forefathers.