The I.E. (win) Peek-a-Boo Bug

For work, yesterday and today, I was given a new photoshop image to chop up and make interactive for the web. Since it's been a bit slow here recently, I thought I'd challenge myself a bit and make this layout completely table free. Why make it table-free when our product currently is built wholly on tables? Well, the main reason is to make one of the co-workers here mad. He has an issue, no matter how many times we explain the benefits, with using CSS on any site. So not only was I having a little fun with challenging a fully CSS layout, but I'm making life harder for him if he feels he needs to change something later on down the line. And to make things even better, I've got the navigation showing up from right to left instead of left to right, just for fun.

So the main thing I wanted to discuss here is the Peek-a-Boo Bug that I encountered today for the first time ever. I've copied the issue and you can see it here. You'll notice, if using a more standards compliant browser like firefox, a nice clean, 100% standards compliant (if you don't count the warnings from other's code) version of a custom IDX website for Barbara Blue. But if you switch rendering engines to IE (you could use something like the IE Tab extension for firefox), you'll notice that all the text on the left-hand side by the quick search (form) elements is missing! Refresh the page, and the text is there. But then if you hover over any of the links, BAM! the text disappears again. I did a quick google for dissappearing text in IE and jumped on a link to thescripts.com and then flew over to Position is Everything where I read about the Peek-a-Boo bug. I was like, yup, that's what's happening to me. But they didn't go into any suggestions as to how to fix it.

So off I went searching through the links on that page until I came to another article on Position is Everything. This time, it told me a bit about what I wanted to know.

This article explains and demonstrates using floated div elements that are hidden when the page loads and appear when you mouse-over a link that is actually showing inside a floated element. Now my issue wasn't quite like that -- pretty much the exact opposite though. All my text showed up to begin with, then when mouse-overing a link the text in the first floated element disappeared. It seemed close enough to the same thing, so I kept reading and came up with two options according to this article at CommunityMX:

add position: relative; to all floated elements and child elements of the floats.
add a height to the container element of the floated div in which the text disappears.

So when I looked back through my CSS, I realized that I had already set the elements to position: relative; so that shot that idea down. Then, I simply added an guestimated (with the help of the MeasureIt firefox plugin by Kevin A. Freitas) height to my float: left; div element. Turns out I guessed the incorrect height, but at least my text didn't disappear when mouse-overing the links anymore!

I have not yet tried this with a percentage height -- or anything that's not a pixel height. So I'm not sure if anything over than a pixel-sized height will work yet.

So lesson learned, you must add a height to your floated element if, in IE, the text starts playing peek-a-boo with you.