Problem of Combo box overlapping the menus.

[shan blossom]

I am using Menus in my JSP pages.while menus are listed all other html properties are not overlapping the menu and menu is displayed correctly.If there is any combo box in the Jsp page then menu is not displayed correctly because the combo box is overlapping the menu list.

[Mathias Nilsson]

This is a HTML/Javascript question more than a JSP question.

The problem is that the select list has higher z-index than the layer, menu.

You can set visibility to hidden when showing the meny but this is not a very good solution. You could add a div around the dropdown and set the z-index for the div and z-index for he menu as higher.

[shan blossom]

I am using IE 6.0. In IE 6.0 z-index attribute is not available for select tag in html.Is there anyother way to avoid this overlapping.

[Bear Bibeault]

z-index is a CSS property, not an HTML one. But even so, it will not help you in IE 6.

Luckily, this is one of the few bugs that Microsoft addressed in IE 7.

[shan blossom]

Then will anybody help me to solve this probelm in IE 6.0?

[Andrey V. Ovcharenko]

You must use div-[span...] tag or div-[div...] tag to emulate select-[option...] behiv.

[Bear Bibeault]

There are few options with IE6.

One clumsy tactic that I've seen used fairly often, and even used myself a few times, is to hide all the select elements when the overlay is to be displayed, and then restore them when the overlay is dismissed. It's a pain, but it alleviates the issue.

Other than that, you can just move things around until there's no overlap -- a non-starter, if you ask me.

Or avoid the use of select elements.

I'm sorry but there's no magic bullet that just makes the problem go away short of requesting that your users use a more reasonable browser -- also usually a non-starter.

[Bear Bibeault]

Originally posted by Andrey V. Ovcharenko:
You must use div-[span...] tag or div-[div...] tag to emulate select-[option...] behiv.

Andrey V. Ovcharenko, welcome to the Ranch. Please try to avoid using non-words like "behiv" when posting. Thanks.

[ashimish mishra]

Hey,
you can use frames to hide those dropdowns.
When ever you are opening the menu, open a dummy frame (full width and height, and transparent) just behind the menu.

You can have the frame created in a div and display it as soon as you open the menu. hide the div while closing the menu.

z-index of main page -> x
z-index of div containing dummy frame -> x+1
z-index of menu -> x+2

IE will automatically hide the dropdowns and as soon as you hide that frame, IE will show the dropdowns again.

You can use this trick for IE6. IE7 already takes care of setting proper z-index for dropdowns.

[Bear Bibeault]

ashimish is correct. That's another work-around that I forgot about. iframes are also drawn on top of everything else and so can be used to mask the dropdowns. iframes are tricky to work with, and it means that the code for the interior of the "popup" needs to be in a separate page, but the technique can be made to work.

It's pretty sad that developers need to go to such lengths just to get around such browser silliness.