Z-индекс не работает в IE8 и IE7

Question

У меня проблема с навигационными вкладками на моем сайте http://chillicom.pixia.cz/. Каждая вкладка представляет собой отформатированный абсолютно позиционный элемент привязки. Как только вы нажимаете на вкладку, она становится активной, что в основном означает, что фоновое изображение кликаемого клика изменится на «активную версию». Активная версия имеет z-индекс 9999, неактивная версия 1, поэтому активная версия может перекрывать неактивную. Работает нормально даже в IE. Однако, когда я нажимаю на последнюю вкладку и затем снова на первую, первая активная вкладка оказывается под второй неактивной. Зачем? Эта проблема возникает только в IE8 и IE7. Кто-нибудь может мне помочь? Спасибо

        <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;
}

Answer 1

z-index: 1px !important;

Измените это на:

z-index: 1 !important;

Простая ошибка, трудно отладить.