A SELECT box shines through an overlayed DIV section

I need to display a kind of modal dialog box on top of a form. I use a DIV section for this and gave it a z-index of 5. The form below has a z-index of 3. The modal dialog box shows on top of the form except that a SELECT (drop down) menu is rendered on top of the new box. It is as if it had a 'topmost' style.

This appears only in Internet Explorer, not in Firefox.

Answer:

This is a known problem in IE (5 and 6, at least). SELECT boxes are rendered topmost - ignoring the z-index value.

The workaround is to temporarily hide the offending elements (all SELECT elements). Look at the code below - to make matters worse, some real old browser versions require a 'hide'/'show' there (instead of 'hidden'/'visible').

// put this in the event handler that displays the modal box:
document.getElementByID("selectID").style.visibility = 'hidden';
// when the modal box closes, put this code in the event handler:
document.getElementByID("selectID").style.visibility = 'visible';

Send a message to

Subject

Comments:

2007-07-01, 07:28:27

anonymous from Poland

Above solution doesn't work. There should be getElementById not ...ByID. In JS letter case does matter.

2007-12-26, 00:37:03

anonymous from India

can u give any example for this

Keywords:

2009-09-30, 12:18:19

avril____lavigne@hotmaikl.com from Netherlands Antilles

Hello. Newspapermen learn to call a murderer 'an alleged murderer' and the King of England 'the alleged King of England' to avoid libel suits.
I am from Senegal and too poorly know English, please tell me right I wrote the following sentence: 'From its camera in 1919 until 1971, the memorial cup was opposed via a strike of resources to the express challenge credit of canada.'