It took me two entire days to figure out that it’s not my fault! It’s IE-freakin-6. I’m so annoyed.

Here’s the issue: I used my favorite technique for creating CSS tooltips on a form. Next to each form field is a [ ? ] which, when moused over, gives the form-filler-outer some useful guidance.

“It works fine in Firefox” has become my new nickname.

It also works in IE7. However, mysteriously, when you hover over a question mark next to a dropdown list, in IE6 the dropdown list will always stay on top of the tooltip.

It does this:

When it’s supposed to do this:

The solution is to write a bit of javascript that creates a temporary Iframe around the Select element. I found the code here.

Not the easiest fix for me to figure out, but it works.

Now if everyone would just switch to Firefox (please!) my life would be much easier.