Menu CSS - IE Vs FIREFOX

leitaoo · 16 de julho de 2008

Estou com um problema no menu que estou trabalhando para um site para intranet.

O menu possui efeito hover em que ao passar o mouse sobre cada botão uma nova imagem aparece no background do respectivo botão. Todos os botões são identicos de tamanhao exceto o último, justamente o que está com problema. Na imagem abaixo: INFORMAÇÔES GERAIS

No IE7 e no Firefox 3 o menu funciona perfeitamente, entretanto no IE6 não funciona em parte. O último botão não realiza o efeito mencionado.

Segue parte do conteúdo do default.css relatcionado ao menu:


/* Pages */

#pages {
    height: 145px;
    padding-top: 0px;
    background: url(images/img02.gif) repeat-x;
}

#pages h2 {
    display: none;
}

#pages ul {
    display: block;
    width: 620px;
    height: 145px;
    margin: 0 auto;
    padding: 0;
}

#pages li {
    display: inline;
}

#pages a {
    display: block;
    float: left;
    width: 100px;
    height: 72px;
    padding: 0px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: -1px;
    font-size: 1.1em;
    font-weight: normal;
    color: #000000;
    font-variant: small-caps;
    margin: 0px;
    cursor: help;
    }

#pages b {
    display: block;
    float: left;
    width: 200px;
    height: 72px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: -1px;
    font-size: 1.1em;
    font-weight: normal;
    color: #000000;
    font-variant: small-caps;
    cursor: help;
    }

#pages a:hover {
    color: #000000;    
}

#page1 { background: #E5FAA1 url(images/img07.gif) no-repeat; }
#page2 { background: #97F0E6 url(images/img07.gif) no-repeat; }
#page3 { background: #F3B6CE url(images/img07.gif) no-repeat; }
#page4 { background: #FADDA1 url(images/img07.gif) no-repeat; }
#page5 { background: #C9CDFF url(images/img07.gif) no-repeat; }
#page6 { background: #E5FAA1 url(images/img07.gif) no-repeat; }
#page7 { background: #97F0E6 url(images/img07.gif) no-repeat; }
#page8 { background: #F3B6CE url(images/img07.gif) no-repeat; }
#page9 { background: #FADDA1 url(images/img07.gif) no-repeat; }
#page10 { background: #C9CDFF url(images/img07.gif) no-repeat; }

#page1:hover, #pages .active #page1 { background-image: url(images/med.gif); }
#page2:hover, #pages .active #page2 { background-image: url(images/img12.gif); }
#page3:hover, #pages .active #page3 { background-image: url(images/img12.gif); }
#page4:hover, #pages .active #page4 { background-image: url(images/img12.gif); }
#page5:hover, #pages .active #page5 { background-image: url(images/img12.gif); }
#page6:hover, #pages .active #page6 { background-image: url(images/img12.gif); }
#page7:hover, #pages .active #page7 { background-image: url(images/img12.gif); }
#page8:hover, #pages .active #page8 { background-image: url(images/img12.gif); }
#page9:hover, #pages .active #page9 { background-image: url(images/img12.gif); }
#page10:hover, #pages .active #page10 { background-image: url(images/img12.gif); }


#pages b:hover {
    color: #000000;
}
#page11 { background: #C9CDFF url(images/info2.gif) no-repeat; }
#page11:hover, #pages .active #page11 { background-image: url(images/info1.gif); }

Segue o menu no index.html:


<div id="pages">
    <h2>Pages</h2>
    <ul>

      <li><a id="page1" href="html/med-1.html">medicamentos</a></li>
    <li><a id="page2" href="#">consultas</a></li>
    <li><a id="page3" href="#">óculos</a></li>
    <li><a id="page4" href="#">vacinas</a></li>
    <li><a id="page5" href="#">exames</a></li>
    <li><a id="page6" href="#">terapias</a></li>
    <li><a id="page7" href="#">academia</a></li>
       <li><a id="page8" href="#">fisioterapias</a></li>
       <li><a id="page9" href="#">odontologia</a></li>
       <li><a id="page10" href="#">órteses/próteses</a></li>
    <li><b id="page11" href="#">Informações Gerais</b></li>
    </ul>
</div>