Clever Geek Handbook

IE CSS positioning problem

I have markup for a popup menu that works in firefox but not IE. The problem is the popup appears below other elements and is unresponsive to the z-index value. Below is an example of execution.

Now I know one fix is ​​not to position the divs as relative, but I cannot do that because in real code I am using scriptaculous and it adds "position: relative" to do what it needs to do. Also, I don't think it matters.

Is there some other fix that will 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">
<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>
+1


source to share


2 answers


The z-index is scoped within the parent element 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.

+4


source


If you move the TABLES outside of the DIV this works. Hope this satisfies your needs? I think I am also embarrassed if I were a DIV and you asked me to order a Z-code over something that I hold above me.



+2


source






More articles:


All Articles