0

I have a problem with navigation tabs on my site on http://chillicom.pixia.cz/. 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

        <div id="menu">
            <a href="#" class="about active" name="about">about us</a>
            <a href="#" class="services inactive" name="services">services</a>
            <a href="#" class="contact inactive" name="contact">contact</a>
        </div>


#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;
}
user1197484
  • 1
  • 1
  • 1

1 Answers1

0
z-index: 1px !important;

Change this to:

z-index: 1 !important;

Simple error, hard to debug.

Belladonna
  • 3,824
  • 2
  • 24
  • 33
  • unfortunately, that was just a typo, it's okay in my code. in other words, it didn't solve my problem :( – user1197484 Feb 09 '12 at 12:11
  • 1
    Ah, sorry. Well, you don't need the !important after the z-indices since that's only to overwrite inline-styles. Also, try a z-index of 10 for active instead of 9999. Also, this might be helpful: http://stackoverflow.com/questions/1287439/ie7-z-index-problem – Belladonna Feb 09 '12 at 16:09
  • the article mentioned in this topic actually helped, even though i've already seen this topic and read the article. i probably messed up when i tried solve my problem by this technique. anyway, thank you very much :) – user1197484 Feb 09 '12 at 17:34