Skip to: Site menu | Main content

Infected by Internet Explorer's Peek-a-boo Bug

Internet Explorer version 6 (IE6) is well known for its quirkiness - so much so that some HTML/CSS pros derive a good portion of thier income from helping other designers figure out how to work around its bugs.

A number of IE6's bugs have even been given cute little names to help offset the often violent reaction that developers have when they come across them. There's the "double border", the "3-pixel gap", the "guillotine", and the topic of this post - the "peek-a-boo" bug.

The peek-a-boo bug manifests itself by hiding seemingly randomly content of your page. It's not completely random, the text must be located in CSS floated elements. In a recent case I was infected with, the bug would case various elements of text to change color to match the background - rendering them invisible. Madenigngly, this wouldn't happen right away after the page loads - it was somehow "triggered" by a javascript event on the page.

I was working on a Drupal-powered site that used the jQuery Calendar control. This control adds a little popup calendar to help in date selections. The page was working fine under Firefox, Safari, and IE7, but with IE6, whenever the popup calendar was called upon, a bunch of the text elements on the page disappeared.

Luckily, I was able to track down this type of bug, and found that there were three possible workarounds: setting "position: relative;" for the floated elements, nest the floating elements in a <p> tag, or removing any CSS background property from the floating elements. Both of the first two workarounds caused havoc to the page design, so I was forced to remove background colors from the affected floating divs. I limited this change to only IE6 using the CSS "holly hack" immediately after the floating div's CSS definition:

div.disappearing_content {
background: #FFFFFF;
float: left;
border: 1px solid green;
} * html div.disappearing_content {
background: none;
}

The holly hack is just a way of writing CSS that will only be recognized by IE6 (or a lesser version). So, all browsers will see the first CSS definition, giving the floating element a white background, while only IE6 will see the second definition, where we remove the background - thus curing the peek-a-boo bug.

UPDATE - After I had solved this issue, I came across positioniseverything.net's write-up on the peek-a-boo bug. Their solution differs slightly than the one I used - they claim simply by giving the floated element "layout" (a wacky IE definition that determines how IE draws an element on a page) would solve the problem. An easy way to give an element "layout" is to give it a "height: 1%;" CSS property. I didn't try this in my case (if it ain't broke...), but I'm pretty sure next time I run across the peek-a-boo bug, it'll be the first thing I try.

Submitted by michael on Thu, 01/31/2008 - 9:35pm
Filed under: