Alright, so this blog is a rant and dedicated to something known as the peek-a-boo bug in Internet Explorer 5.x and above. What I'm about to describe may not be exactly what people describe as the peek-a-boo bug, but that's what I'm calling it because it's close enough. I referenced it in a previous blog, but only now have I completely resolved the issue. At least I hope so.

I've spent the last 2 days, approximately 5 hours off an on, trying to figure out a way to overcome IE's poor CSS implementation, yet again. Click on the image above and look at how IE was punishing me.

Prior to this being resolved, the bug unveiled its nasty behavior when you utilized the 'Suggestions' feature for the tags section. As you type, I have javascript in the background that tries to auto-suggest tags in your collection for you. You can press tab to auto-complete your tag. Simple enough, right? Well, the suggestions box is display: none by default. Here's what it looks like.

<div id="suggested_tags">
</div> 

When you type, that element is filled with the suggestions. The stylesheet entry for this looks like this.

#suggested_tags {
    clear: both;
    display: none;
    margin: 5px 0 10px 0;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #fdffe9;
}

Well, the problem is that the right below the suggestions box there is a listing of your personal tags. These are in the format of an unordered list <ul> and each element is float:left. That seems to give IE heartburn. In reality, here's what it's supposed to look like.

What it did look like:

What it should look like:

So when the page loads, it would look normal until you were auto-suggested a tag. The suggestions would be shown, but the background color and border were cut off as is obvious in the image I mentioned above. Wait, it gets better. If you click on the 'Your Tag Collection' link which toggles your tag collection, the background and border would appear/disappear. Sigh. Just when I was about to give up and let IE users just deal with it until IE7 came out, I figured out a fix that seems to work.

<div class="peek-a-boo">
    <div id="suggested_tags">
    </div>
</div>

Notice the additional <div> tag I had to add. Since the common solution is to add a position:relative in the stylesheet, I gave it a shot and that worked.

.peek-a-boo {
    position: relative;
}

Thus, hopefully the peek-a-boo bug can rest in peace.