The root of this problem are the left-hanging headers and bullet points, which I implemented after reading The Elements of Typographic Style. IE7 incorrectly clips these.

The bug exists in IE6 too. To fix it there I used the “* html” hack to deliver modified CSS snippets to IE6 which would be ignored by other browsers. The pattern is roughly this:

h3 {
  /* code to do the left-hanging headers */
}

* html h3 {
  /* fix for IE6 - undo the left-hanging headers to
    avoid the clipping bug */
}

This hack is unpleasant (we’d much prefer all browsers to implement the standards), but at least it keeps the original working CSS and the IE6 fix together. And we only need to send a single stylesheet, with all the attendant speed and caching benefits, not to mention ease of implementation within our CMS.

IE7 has fixed the “* html” hack, but not of course the clipping bug. IE7 therefore correctly ignores the fixes, but renders the page incorrectly.

There is no pleasant replacement for the “* html” hack (one might be found in future though, as bugs in the parsing of IE7 are happened upon accidentally). To fix this now we will have to change our CMS to send a separate stylesheet to IE7 or use conditional comments.

More hours of work fixing Internet Explorer. Thanks, Microsoft.

Updates

Comparison of web standards support in IE7, IE6 vs other browsers

The weird and wonderful world of Internet Explorer

Interview with head of IE7 development – he comes across as cynical and defensive.