(Resolvido) Problema com link em lista HTML

[Anderson Ferreira]

Olá galera, boa tarde a todos!

Estou com um probleminha ;X

Fiz uma lista HTML, esta lista vai ser meu menu horizontal. Então, coloquei links em cada item dessa lista, pois o menu tem links, claro ...

Meu HTML ficou assim:

[...]

<ul class="cabecalho_menu">
    <a href="#inicio"><li class="inicio"></li></a>
    <a href="#login"><li class="login"></li></a>
    <a href="#cadastro"><li class="cadastro"></li></a>
    <a href="#cadastro"><li class="outras_cidades"></li></a>
    <a href="#anuncie"><li class="anuncie"></li></a>
    <a href="#sobre"><li class="sobre"></li></a>
</ul>

[...]

E meu CSS:

.cabecalho_menu { padding-top: 25px; }
.cabecalho_menu li { display: inline; float: left; margin-right: 35px; }

.cabecalho_menu .inicio { width: 65px; height: 37px; background: url('../img/cabecalho_menu.png'); }
.cabecalho_menu .login { width: 75px; height: 37px; background: url('../img/cabecalho_menu.png') -65px 0; }
.cabecalho_menu .cadastro { width: 105px; height: 37px; background: url('../img/cabecalho_menu.png') -140px 0; }
.cabecalho_menu .outras_cidades { width: 155px; height: 37px; background: url('../img/cabecalho_menu.png') -245px 0; }
.cabecalho_menu .anuncie { width: 90px; height: 37px; background: url('../img/cabecalho_menu.png') -400px 0; }
.cabecalho_menu .sobre { width: 66px; height: 37px; background: url('../img/cabecalho_menu.png') -490px 0; }

Usei uma única imagem pra ser o menu, e utilizei o background-position pra posicionar cada background de cada item da lista

Então abri minha página no Internet Explorer e funcionou normalmente... Um menu com 6 itens, e cada item com um link.

Depois abri minha página no Google Chrome, e também funcionou normalmente.

Mas na hora que abri no Firefox, os links do menu não funcionou =X // Ou seja, os itens apareceram normalmente, um do lado do outro, idêntico aos outros navegadores, o problema é q os links não funcionaram :S // O que será q esta acontecendo?

MUITO Obrigado,

Anderson Ferreira

Editado Janeiro 23, 2010 por Anderson Ferreira

[Willian Antunes]

Primeiro vem a LI depois a tag A, olhe o exemplo:

<li class="inicio"><a href="#inicio"></a></li>

Use o validador da W3C para verificar a semântica do seu código:

http://validator.w3.org/

[]'s

[Anderson Ferreira]

Primeiro vem a LI depois a tag A, olhe o exemplo:

<li class="inicio"><a href="#inicio"></a></li>

Use o validador da W3C para verificar a semântica do seu código:

http://validator.w3.org/

[]'s

Tentei assim também, mas dessa maneira é pior ainda, não funciona em nenhum navegador o link :S

[Willian Antunes]

Entendo .. mas é assim que tem que fazer .. conseguiu alguma coisa?

[Anderson Ferreira]

Da maneira q você falou não funcionou :S // E da minha maneira não funciona no Firefox os links

E acho q a única maneira de fazer isso CORRETAMENTE, é com listas =\

-----------------

Mas acho q posso fazer assim: fazer a lista, e colocar DIV dentro da lista, e colocar pra que as imagens dos itens do menu seja impressa pela DIV,e não pela lista

Vou tentar e posto o resultado aq :D

[Anderson Ferreira]

RESOLVIDO =D

Fiz o nome com DIV`s e funcionou

<div class="cabecalho_menu">
    <a href="#inicio"><div class="inicio"></div></a>
    <a href="#login"><div class="login"></div></a>
    <a href="#cadastro"><div class="cadastro"></div></a>
    <a href="#outras_cidades"><div class="outras_cidades"></div></a>
    <a href="#anuncie"><div class="anuncie"></div></a>
    <a href="#sobre"><div class="sobre"></div></a>
</div>

Obrigado,

Anderson Ferreira