I was working on a new bug today. From the title you should know it is an IE6 related bug. And yes, it is. The problem is with the select tag and the tooltip JavaScript. It seems that IE6 will not let anything show above the selection input box. In IE6′s eye, selection box is the king, the absolute to layer element. I’m m not sure if his is correct or not, but it seems that way to me.
So anyway, I was researching this issue on the web and I found out that there are a lot of people that had similar issue. And some of them offered solutions, but they don’t actually help me with my bug. However, they do offer some ideas for me to try out.
Since the issue was a jquery based tooltip skinned by CSS so the most obvious thing for me to try was to add the z-index to the tooltip pop-up. The attempt failed and I believe it was because the select tags are on a higher heritage than the div of the pop-up. So my next logical action is to make sure that they are on the same level and assign a position property for the select Tate’s div. That didn’t work. Finally, I tried to add a shell division around the select division so that it is one level below the pop-up div. And no change there either.
All three methods did not break the code in other browsers so my gut tells me they are not in correct.
My test resullts confirmed my hypothesis that in IE6, select is considered above all layers.
So how can I fix the bug? Very simple, the tooltip pops up above the linked text but below the selection box. What I did was move the linked text above the selection box. Not ideal, but it is the best solution I can come up now. Until somebody can help me out with it I guess.
Leave a comment