title: Z-index not working in IE8 and IE7
body: <p>I have a problem with navigation tabs on my site on <a href="http://chillicom.pixia.cz/" rel="nofollow">http://chillicom.pixia.cz/</a>.
  Each tab is a formatted absolutely positioned anchor element. Once you click on a tab, it becomes active, which basicaly means that background image of clicked anchor will change to its "active version". Active version has a z-index 9999, inactive version 1 so an active version can overlap an inactive one. It works fine, even in IE. However, when I click on the last tab and than again on the first one, the first active tab will appear to be under the second inactive one. Why? This problem occurs only in IE8 and IE7. Can anyone help me, please? Thanks</p>
  
  <pre><code>        &lt;div id="menu"&gt;
              &lt;a href="#" class="about active" name="about"&gt;about us&lt;/a&gt;
              &lt;a href="#" class="services inactive" name="services"&gt;services&lt;/a&gt;
              &lt;a href="#" class="contact inactive" name="contact"&gt;contact&lt;/a&gt;
          &lt;/div&gt;
  
  
  #menu {
      width: 500px; height: 27px;
      margin-left: 300px;
      margin-top: -27px;
      overflow: hidden;
  }
  
  #menu a {
      display: block;
      background-repeat: no-repeat;
      float: left;
      position: absolute;
      font-size: 15px;
      color: #808080; text-decoration: none; text-align: center;
  }
  
  #menu .active {
      width: 139px; height: 27px;
      line-height: 29px;
      background-image: url('/images/button-active.png');
      z-index: 9999 !important;
  }
  
  #menu .inactive {
      width: 117px; height: 22px;
      line-height: 20px;
      margin-top: 5px;
      background-image: url('/images/button-inactive.png');
      z-index: 1px !important;
  }
  
  #menu .about.active {
      margin-left: -10px;
  }
  
  #menu .services {
      margin-left: 120px;
  }
  
  #menu .services.active {
      margin-left: 110px;
  }
  
  #menu .contact {
      margin-left: 240px;
  }
  
  #menu .contact.active {
      margin-left: 230px;
  }
  </code></pre>