PDA

Click to See Complete Forum and Search --> : popup menu hides behind drop down box

webdevjh
01-08-2004, 11:34 AM
Any ideas on why the below sample piece of code overlays all but drop down boxes?

Any help would be appreciated

<html>
<head>
<title>Pop Up Boxes</title>
<style type="text/css">

#japan {position: absolute;
top: 15px;
left: 175px;
width: 100px;
border: solid 2px #000000;
background-color: #ffffff;
color: #000000;
padding: 5px;
z-index: 0;
visibility: hidden;
}
</style>

<script language="JavaScript">

function box(boxname,menustate){
if (document.getElementById)
{document.getElementById(boxname).style.visibility =
menustate}
else {document[boxname].visibility = menustate}
}//ends function

</script>

</head>

<body bgcolor="#aaaaaa">

<a href="javascript://"
onMouseOver="box('japan','visible')"
onMouseOut="box('japan','hidden')">
Click here to test the popup</a>
<select>
<option>GOAT
</select>
<br>
<input type="text" value="SHEEP" size="40">
<br>
<label>Hello Notice this text and the above is
overlayed with the popup. The drop down box seems to
be weightier in this case. Since it doesn't go
away.</label>
<br>

<div id="japan">
Blah blah blah blah blah blah blah blah blah blah
blah. However, it is not. All it looks like now is a
missing image.
</div>



</body>
</html>
ccoder
01-08-2004, 12:41 PM
This is a fairly well documented problem. Click here (http://www.webreference.com/dhtml/diner/seethru/indexNEW.html) for a decent explaination.

Here (http://www.mojavelinux.com/cooker/demos/) is a demo of a possible workaround and here (http://www.mojavelinux.com/forum/viewtopic.php?t=141) is the link for the code.

The workaround works by detecting when the menu intersects with a positioned element and temporarily hiding the element. I haven't tried it yet so I can't make any comments.
Xin
01-08-2004, 12:57 PM
i just can't help to advertise my menu :)

netscape7 and opera7 have already fixed this problem, only ie is left behind. here is the sample of menu overlapping form select list:
http://yxscripts.com/menuG5/examples/form.html

the trick works in IE5.5 and later only. it uses a same sized transparent iframe beneath the menu, and the iframe will make the menu on top of form select list, flash and applet objects.

if you need to support ie5.5- and netscape 4, you still have to follow the solution mentioned on webreference.com

thx,