Fast Loans - Myspace Comments - Personalized Gifts - Loans - Personal Loans
PDA

View Full Version : Layer is blocked by combo box

welles
Mar 30th 2005, 12:14 pm
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
J.D.
Mar 30th 2005, 5:14 pm
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.
marty
Mar 31st 2005, 8:56 am
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
nullbit
Mar 31st 2005, 11:18 am
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.
J.D.
Mar 31st 2005, 12:01 pm
Marty is correct, there is no real solution to this, it's a rendering bug in IE.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>

J.D.
marty
Apr 1st 2005, 9:53 am
<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">
welles
Apr 4th 2005, 10:09 am
Solution found!

http://www.codingforums.com/showthr...&threadid=28261
Albertraj
Sep 1st 2005, 9:46 am
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?
tutty
Jan 4th 2006, 2:28 am
look at this:

http://www.aplus.co.yu/wch/intro/
legend2
Jan 6th 2006, 4:03 pm
bottom of the line, IE is never as we expect it to.
Eddie Traversa
Jan 11th 2006, 1:00 am
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/