Incompatibilidade de a:hover no IE

[Vís_ 0]

Olá galera... primeira postagem no forum ;D

 

Terminei o CSS de uma pagina, na verdade minha primeira. Pelo menos aqui, no Firefox rodou tudo legal. Já no IE... bom...

Nosso velho amigo deixou meus hovers na mao. no nav1, o shadow nao funciona, pra dar o efeito de brilho. Alguma sugestão? Pensei em usar imagens para o efeito, apesar de nao gostar dessa ideia.

 

Outro probleminha é no nav2. No IE, acontece um deslocamento para a direita quando passa o mouse por cima do menu, nao entendo pq. Alguma sugestão?

 

Hospedei num host gratis, o link é vis.t35.com

Agradeço a quem puder ajudar!

[Evandro Oliveira 331]

Nosso velho amigo deixou meus hovers na mao. no nav1, o shadow nao funciona, pra dar o efeito de brilho. Alguma sugestão? Pensei em usar imagens para o efeito, apesar de

 

Esse aqui não tem jeito mesmo. Até o IE8 não existe suporte a text-shadow. Vai ter que ser na base da imagem.

 

Outro probleminha é no nav2. No IE, acontece um deslocamento para a direita quando passa o mouse por cima do menu, nao entendo pq. Alguma sugestão?

 

Não defina o display como block no momento do :hover. Modifique esta propriedade como valor padrão do elemento. Altere apenas as propriedades necessárias no :hover para o efeito desejado.

[Vís_ 0]

Não defina o display como block no momento do :hover. Modifique esta propriedade como valor padrão do elemento. Altere apenas as propriedades necessárias no :hover para o efeito desejado.

 

Pois eh, mas dai nao funfa. Testa ai tirar, ele nao fica na altura de 29px, dai o background nao preenche todo o espaco. Tentei line-height mas nao funcionou...

=/

[Evandro Oliveira 331]

Para o IE é necessário fornecer também o height, não apenas o line-height

[Vís_ 0]

no way jose!

 

nao tinha rodado nem no FF.

de qualquer forma, tirei o block, coloquei height e line-height; fica soh uma faixa azul no hover, em vez de o background preencher todo o espaço.

=/

 

errm... será que alguem teria mais alguma sugestão?

o.O

[angelorubin 142]

Bom dia,

 

Poste um link ou um trecho do código com problema para verificarmos, por gentileza.

 

*Desculpe agora que vi o link.

[Vís_ 0]

iae angelo, alguma ideia? vlw!

=/

[Guilherme Müller 0]

Eu modifiquei um pouco o seu código para evitar problemas de compatibilidade:

 

#nav2 {
 right: 78px; /* ou 100px */
 height: 29px;
 position: relative;
 top: -1px;
 float: right;
}

#nav2 li {
 display: inline;
}

#nav2 a {
 font-family: verdana, tahoma, corbel, arial;
 font-size: 14px;
 line-height: 23px;
 padding-left: 10px;
 display: block;
}

#nav2 a:hover {
 background: url('leftroll.gif') left no-repeat;
}

#nav2 a span {
 padding-right: 10px;
 display: block;
}

#nav2 a:hover span {
 background: url('rightroll.gif') right no-repeat;
}

 

Na maioria das vezes que faço um menu com listas, coloco o <li> como inline, para retirar este elemento da questão e evitar problemas como este que está acontecendo. Depois, coloquei tanto o <a> quanto o <span> como block (não apenas no hover), isto é essencial para o tipo de menu que você está tentando fazer. Fiz um teste rápido e parece estar ok. Eu mudaria outras coisas como o posicionamento do menu e etc, tem maneiras mais simples de fazer isso (mas não vem ao assunto agora).

 

Quanto a sombra, como já disseram o IE não suporta text-shadow. Apenas coloque mais uma propriedade no hover que apareça no IE e pronto.

 

Espero que ajude!

[Vís_ 0]

Olha amigo...

 

obrigado pela resposta, fiz as alterações que sugeriste, mas aqui não mudou absolutamente nada no resultado final, ele continua dando o erro. No IE há um deslocamento no hover; no chrome, apenas o fundo azul do último menu qd passa o mouse fica, digamos, 1 pixel a direita de onde deveria estar, gerando um 'degrau' ali. Só no firefox o fundo azul do hover se alinha perfeitamente com o fundo azul do nav1.

Bom, isso pelo menos neste note q estou usando, devo testar em outros pcs..

 

Outra coisa, estou usando um segundo codigo para flash, porem o painel continua nao aparecendo no IE. Vou pesquisar mais ainda, mas se for algo facil de perceber e alguem quiser dar uma dica do que está faltando, agradeço!

 

 

abçs

[Evandro Oliveira 331]

- Marcação inválida

 

- Divmania

 

- Uso incorreto de tabelas

 

- Marcação excessiva para flash

 

- Uso de frames

 

- Não utilize 'noscript'. Uma página corretamente marcada deve implementar um 'noscript' por padrão. Javascript deve ser utilizado como bônus e não como essência do funcionamento.