Help with html select replacement

Question

I hate default select control, that's because it can't be styled in IE using CSS. This is why I developed a new select control from scratch, using HTML + CSS + JavaScript. I did a great job in the past two days matching CSS and HTML together, but today I discovered a bug wich looks very hard for me to fix.

In IE 7, when I have tow controls on the same page, the one from top does not overlay the one from bottom.

See the image: coolrgb dot com/files/select-help.jpg

Download the demo page (HTML + CSS + Javascript): coolrgb dot com/files/select-help.zip

Please help me, this control looks so nice for me and I want to use it on all my projects from now on. This bug killed my hopes and lot of time.

Thank you.

Answer 1

Edit: After rereading the question, this answer now seems totally unrelated, but I'm keeping it here anyway.

Not really an answer, but an attempt to explain:

In Internet Explorer, <select> tags are implemented as simple windowed controls, while all other elements are windowless controls (this allows them to be styled). That's why these tags are always on top and don't follow the z-order rules. (The drop-down menu part must be styleable so it's a windowless control, and so it shows under the main part.)

In Firefox all elements are windowless, and in IE8 they should be too.

Answer 2

If you give each control the same z-index, then you will not have control over the stacking order.

I would suggest modifying your control to behave more like a real SELECT element: only one can be open at a time, or losing focus causes it to close. Alternately, you can set a high z-index when the control has focus, and a lower one when it does not.

Another thing to look out for: try putting some other controls like radio, checkbox, and select under your control. You might find that IE also will not hover over those even if you give them a different z-index (as @grawity explained in his answer). This is why you'll typically see widget demos displayed on top of these elements, as shown here: http://jqueryui.com/demos/dialog/

A typical hack to fix this is to use an iframe, but that probably deserves a different question altogether.