views:

815

answers:

3

I have some markup for a popup menu that works in firefox but not IE. The problem is that the popup pops under other elements and is impervious to the z-index value. A complete runnable example is below.

Now, I know that one fix is not to position the divs as relative, but I can't do that because, in the real code, I'm using scriptaculous and it adds the "position: relative" to do what it needs to do. Besides, I don't think it should matter.

Is there another fix that would make this code work for both IE and firefox?

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>IE Problem</title>
<style type="text/css">
.mydiv{
  position: relative;
  background: yellow;
  border: solid 1px black;
}
table{background:black;} 
td.menu{background:lightblue}
table.menu
{
  position:absolute;
  visibility:hidden;
  z-index:999;
}
</style>
<script type="text/javascript">
function showmenu(elmnt){
   document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt){
   document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<div class="mydiv" onmouseover="showmenu('one')" onmouseout="hidemenu('one')">

   <a href="#">div one</a><br />
   <table class="menu" id="one" width="120">
     <tr><td class="menu"><a href="#">Item 1</a></td></tr>
     <tr><td class="menu"><a href="#">Item 2</a></td></tr>
   </table>

</div>
<div class="mydiv" onmouseover="showmenu('two')" onmouseout="hidemenu('two')">

   <a href="#">div two</a><br />
   <table class="menu" id="two" width="120">
     <tr><td class="menu"><a href="#">Item 1</a></td></tr>
     <tr><td class="menu"><a href="#">Item 2</a></td></tr>
   </table>

</div>  
</body>

</html>
+2  A: 

If you move the TABLEs outside of the DIVs it works. Hopefully this satisfies your needs? I think I would get confused too if I was a DIV and you asked me to Z-order something I am containing above me.

Scott Evernden
The problem with that, not that you could have known that, is the menu is part of the div. I'm using scriptaculous to allow the divs to be moved. If someone moves the divs I want the menu to go with it.I could perhaps move the menu when the div is hovered over.
dl__
+4  A: 

The z-index is scoped to within the parent if the parent has position: relative or position: absolute.

The solution for your example is to add style="z-index: 2;" to the first "mydiv" and z-index: 1; to the second.

Greg
This is the answer I went with. Seems to work although the dropdown menu is a little flickery under IE as I move the mouse around.
dl__
A: 

I agree with Greg, because I had the same problem and fixed this by using z-index like Greg said.

gacon