Bitten by the Peek-a-boo bug

Wouter was so kind to point out that the post referring to the NL-JUG impression article looked messy on the blog front page. I first thought the orange style I altered the blog with for the World Championship may had something to do with it, but after some Googles I found the real problem. I used the elite css keyword “float: right” in combination with a “clear:all” at the bottom of the text to prevent the image to fall through, while still auto-size properly. This had the following result on Internet Explorer:

As shown a portion of the text is missing!

Internet Explorer 6 (I tested 7 and it is fixed there) has problems when the “clear” element actually needs to do something (when it hits the floating element because there is very little text) and when the containing element is autosizing. It exhibits all kinds of drawing artifacts like the ones messing up my perfectly HTML valid post entry. It is called the Peek-a-boo bug, because when you scroll or click on a link the content suddenly does re-appear and all is fine from then on.

There are some workarounds available but none are pretty and/or will not break other browsers and/or actually work. I set up a fixed height for now, this causes it to show up nice in IE (because IE has some other bugs considering fixed heights as well). Alas, Firefox or other proper functioning browser users now might see some weirdness when maximizing text size and resizing the window to a tiny box. If anyone has a more elegant work-around for this nasty bug please let me know!