Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Markup experts, help! Dropdown vs input problem.

edited February 2007 in Vanilla 1.0 Help
Dropdown Problem(View this post in HTML mode please.)
Hi. I have addressed this topic here once, and I am doing this again in a desparate attempt to receive at least some help from you guys.

Here is the problem: in Internet Explorer input items are visible when the dropdown menu popups (see the picture). Please use IE, and hover over the top menu item which says "GSM" in this example. There is a <select> element just below this menu, and it is still visible. Z-index does not work in IE. How can I get this work properly, so that the dropdown menu covers this select input? I would really appreciate your help, couse I can't fix this.

Truly hope for your help.



  • I'm too lazy/busy to dig into your markup, but I'm pretty confident that your problem is coming from "stacking context".
    The two interfering elements (menu and select) probably belong to different stacking contexts, i.e. positionned elements.
    Look at the CSS specs under z-index attribute and try to figure out how many stacking context you have. They can be nested so you must give the menu context a higher z-index than the select context.
  • edited February 2007
    It is a bug in IE. Select will always be on the top. You have to use iframe to fix it. I don't remember what you have to do exactly. I know Mark had a similar problem (I gave you a link to his blog that was talking about this z-index in your previous post about menu).

    The Yahoo UI library has a menu feature, it might be better to use it, and they talk about this bug in video about the menu feature:

    Good luck!
This discussion has been closed.