Hi all, I have a nevigation menu that uses javascript layer to create drop down menu effect. However, for some reason, the menu layer is blocked by the combo box on the page (in other words, the menu layer is behind the combo box). I've searched the web and found that I could set the z-index for ordering of the stack of the sibling layers. But, unfortunately, it only works for sibling layers, not combo box on the page. Can please anyone give me some directions? Thanks, Welles
Keep in mind that z-index works only for positioned elements (i.e whose position property is not static). Check the position property throughout your HTML/CSS. J.D.
The only solution I have ever found for this problem is to place the combo box within it's own div and set the combo boxes visibility to "hidden" on whatever event causes the menu layer to be displayed. Good luck Marty
Marty is correct, there is no real solution to this, it's a rendering bug in IE. Either take marty's advice or move the layer so it's not in the same space as the combo-box.
I didn't know about this bug. A quick test shows that, IE simply ignores the position attribute and any relative elements following the combo box are not rendered correctly either: <html><head> <style type="text/css"> div {width: 100px; height: 100px; background-color: #FEE; border: 1px solid red;} select {width: 100px; height: 100px; border: 1px solid blue; background-color: #EEF;} </style></head><body> <div style="z-index: 100">div1<br><strike>z-index</strike></div> <div style="position: relative; top: -50px; left: 50px; z-index: 10;">div2</div> <select name="cb1" style="position: relative; top: -100px; left: 100px; z-index: 20;"> <option selected>value1</option> <option>value2</option> <option>value3</option> </select> <div style="position: relative; top: -150px; left: 150px; z-index: 30;">div3</div> </body></html> Code (markup): J.D.
<script language="JavaScript" type="text/javascript"> function hide(hider) { document.getElementById(hider).style.visibility = "hidden" } function show (shower) { document.getElementById(shower).style.visibility = "" } </script> <a onmouseout="show('001')" onmouseover="hide('001')">[hide]</a> <br> <input id="001" type="text" name="dfd"> Code (markup):
Layer is blocked by combo box -------------------------------------------------------------------------------- Hi all, I have a nevigation menu that uses javascript layer to create drop down menu effect. However, for some reason, the menu layer is blocked by the combo box on the page (in other words, the menu layer is behind the combo box). I've searched the web and found that I could set the z-index for ordering of the stack of the sibling layers. But, unfortunately, it only works for sibling layers, not combo box on the page. Can please anyone give me some directions?
active content such as forms drop down lists etc needs a specialized fix for IE that involves an iframe. See here http://dhtmlnirvana.com/content/activecontentfix/active3.html Eddie http://dhtmlnirvana.com/