Z-index not working in firefox, but working in everything else (IE, Opera, Safari)

HTML & CSS
1

I’m trying to figure out why on earth z-index is not being applied in Firefox correctly.

I’ve made a tester copy too help see the bug more clearly, hover over “services” in firefox then hover over it again in any other browser (except ie6 since it does not support :hover on anything other than ‘a’ elements) and you’ll see the issue at hand :frowning:

Tester Code, simply copy and paste and it will show you the issue. Don’t mind the background images as they are not needed to see the bug


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tester Copy</title>
<style type="text/css">
html {
    font-family:Arial, Helvetica, sans-serif;
}
body {
    margin-top:10px;
}
p {
    margin-bottom:15px;
}
div#wrapper {
    width:760px;
    margin:0px auto;
    position:relative;
}
div#block-top-middle {
    width:100&#37;;
    height:auto;
    float:left;
    margin:4px 0px 0px 0px;
}
div#block-top-middle div.content-banner {
    float:right;
    height:219px;
    width:456px;
    overflow:hidden;
    background:red;
}
/* NAVIGATION */
ul#nav-content-main {
    width:300px;
    height:210px;
    float:left;
    overflow:hidden;
    background:#b1b1b1;
    text-transform:uppercase;
    color:#FFFFFF;
}
ul#nav-content-main li {
    height:35px;
    line-height:35px;
}
ul#nav-content-main li:hover {
    background:url(../images/menu-hover1.gif) center;
}
ul#nav-content-main li a {
    padding:0px 0px 0px 20px;
    color:#FFFFFF;
    text-decoration:none;
}
ul#nav-content-main li a:hover {
    padding:0px 0px 0px 20px;
}
ul#nav-content-main li ul.subMenu {
    display:none;
}
ul#nav-content-main li:hover .subMenu {
    display:block;
    width:200px;
    background:#1e33b0;
    height:auto;
    position:absolute;
    top:150px;
    left:300px;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="block-top-middle">
    <ul id="nav-content-main">
      <li id="company"><a href="#">Company</a></li>
      <li id="services"> <a href="#">Services</a>
        <ul class="subMenu" id="sm1">
          <li><a href="#">High Voltage</a></li>
          <li><a href="#">Generators</a></li>
          <li><a href="#">Switch Boards</a></li>
          <li><a href="#">Bus Duct Systems</a></li>
          <li><a href="#">Maintenance</a></li>
          <li class="last"><a href="#">Automation</a></li>
        </ul>
      </li>
      <li id="employment"><a href="#">Employment</a></li>
      <li id="contact"><a href="#">Contact</a></li>
      <li id="sitemap"><a href="#">Sitemap</a></li>
      <li class="last"><a href="#" class="last">Home</a></li>
    </ul>
    <div class="content-banner"></div>
  </div>
</div>
</body>
</html>

Note: I took out the z-indexes to allow for the demo

2

Pity this test-example didn’t used z-index as you tested. But, to apply z-index on the containing object it needs a position other then the default static: :slight_smile:


ul#nav-content-main {
    position: relative;
    z-index: 1;
    width:300px;
    height:210px;
    float:left;
    background:#b1b1b1;
    text-transform:uppercase;
    color:#FFFFFF;
}