Peek-a-boo CSS bug

I experienced my first peek-a-boo CSS bug in IE today. I can’t believe this problem has never happened for me. Thankfully, I quickly recognized the problem and remembered reading a solution a while back.

The peek-a-boo bug is when IE reserves space for a block item, say a P, H1, or DIV tag, but fails to display its content. If you use your mouse to highlight the missing content, you’ll find it there. And sometimes, it will reappear after scrolling or resizing the page.

Several folks have fixed this bug by adding “position: relative;” to the element or its parent, but I had already done so when peek-a-boo raised its ugly head. Others added “height: 100%;” and/or “width: 100%;” to the parent element, but I didn’t really like these solutions since I was working with a page that had a fluid width.

A lessor published fix, the one that I chose to use, was to add “line-height: 1.2em;” to the parent element. “Hey, there you are IE (giggle, giggle).”