hover e IE [CSS] - problemas

T

toblesu

Power Member
Boas pessoal....

Tenho o seguinte codigo CSS:

.butao { background:url(geral/images/bt_init.gif) no-repeat; color:#FFFFFF; font: 10px Verdana, Tahoma, Courier New;}
.butao:hover{ background:url(geral/images/bt_hover.gif) no-repeat;}
.butao:active {background:url(geral/images/bt_active.gif) no-repeat;}

Este código no Firefox, funciona às mil maravilhas, acontece que no IE nem se mexe... o hover não funciona!
Pesquisei um pouco e encontrei uma póssivel solução, mas ao tentar implementar não deu nada na mesma......
a solução passava por:

.butao:hover, butao.hover { back...

e inserir as seguintes linhas de código:

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression
*/
* html * { color: expression( (function(who){ if(!who.MXPC){
who.MXPC = '1';
if(who.nodeName != 'A'){
who.onmouseenter=function(){ who.className += ' hover'};
who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
(who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }
[in: http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html ]

eles indicavam para o colocar no final do CSS... acontece que nem no final nem no inicio!! não funciona! :S

Alguém me poderia dar uma dica!??!

Vou continuar a pesquisa...

Obrigado
 
toblesu disse:
Boas pessoal....

Tenho o seguinte codigo CSS:

.butao { background:url(geral/images/bt_init.gif) no-repeat; color:#FFFFFF; font: 10px Verdana, Tahoma, Courier New;}
.butao:hover{ background:url(geral/images/bt_hover.gif) no-repeat;}
.butao:active {background:url(geral/images/bt_active.gif) no-repeat;}

Este código no Firefox, funciona às mil maravilhas, acontece que no IE nem se mexe... o hover não funciona!
Pesquisei um pouco e encontrei uma póssivel solução, mas ao tentar implementar não deu nada na mesma......
a solução passava por:

.butao:hover, butao.hover { back...

e inserir as seguintes linhas de código:

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression
*/
* html * { color: expression( (function(who){ if(!who.MXPC){
who.MXPC = '1';
if(who.nodeName != 'A'){
who.onmouseenter=function(){ who.className += ' hover'};
who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
(who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }
[in: http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html ]

eles indicavam para o colocar no final do CSS... acontece que nem no final nem no inicio!! não funciona! :S

Alguém me poderia dar uma dica!??!

Vou continuar a pesquisa...

Obrigado
Clicar para expandir...

.botao {propriedades}
.botao:visited {propriedades}
.botao:hover {propriedades}
.botao:active, .botao:focus {propriedades}
 
Não funcionou....

Ou então nao percebi..... deixo na mesma as tais linhas de código que tinha encontrado!!?
Bem, a verdade é que nem de uma forma nem de outra funcinou!!!
 
CSS que utilizo, ficheiro: estilos.css

....
.butao{ background:url(geral/images/bt_init.gif) no-repeat; color:#FFFFFF; font: 10px Verdana, Tahoma, Courier New;}
.butao:hover { background:url(geral/images/bt_hover.gif) no-repeat;}
.butao:active {background:url(geral/images/bt_active.gif) no-repeat;}
.....


**************************************++

PHP :

<link href="../estilos.css" rel="stylesheet" type="text/css" />
......
<? echo "......<p><input name=send class=butao type=submit id=send value=Enviar>&nbsp;&nbsp;&nbsp;<input name=cancel class=butao type=reset class=butao id=cancel value=Limpar></p>"; ?>
.............

Isto funciona assim ás mil maravilhas no FireFox... mas no IE apenas coloca assume o estilo de ".botao" não faz o hover....

Este é o meu código inicial sem a inclusão da dica e das pesquisas............
 
toblesu disse:
CSS que utilizo, ficheiro: estilos.css

....
.butao{ background:url(geral/images/bt_init.gif) no-repeat; color:#FFFFFF; font: 10px Verdana, Tahoma, Courier New;}
.butao:hover { background:url(geral/images/bt_hover.gif) no-repeat;}
.butao:active {background:url(geral/images/bt_active.gif) no-repeat;}
.....


**************************************++

PHP :

<link href="../estilos.css" rel="stylesheet" type="text/css" />
......
<? echo "......<p><input name=send class=butao type=submit id=send value=Enviar>&nbsp;&nbsp;&nbsp;<input name=cancel class=butao type=reset class=butao id=cancel value=Limpar></p>"; ?>
.............

Isto funciona assim ás mil maravilhas no FireFox... mas no IE apenas coloca assume o estilo de ".botao" não faz o hover....

Este é o meu código inicial sem a inclusão da dica e das pesquisas............
Clicar para expandir...

Se queres usar background images deves recorrer ao image button e não ao submit e reset. Os eventos (submit e reset) são, no caso do image button, atribuídos por javascript.

Não tenho a certeza, mas sendo botões submit e reset, o IE pode não permitir estados hover e out.

De qualquer modo, falta-te o css class.visited {propriedades}.

Outra coisa, deves usar as propriedades do tag da seguinte forma:

id="o id que queres" name ="name que queres" class="a tua class"
 
Já usei os butoes como sendo "type=image"... encontrei um script na net que me ajudava com um problema que essa alteração provocava também no IE... por e simplesmente o IE não assumia o submit associado ao botão.. e não fazia o POST dos dados do form... acontece que com essas linhas de código, que já resolviam o problema, o hover aparecia por trás da imagem inicial que tinha atribuido ao butao... reparei nisso por causa das dimensões!
Por causa desse problema, é que tentei por outra via.... mas não estou a encontrar resultados positivos!
Ainda acabo por desistir e tirar os efeitos do Hover.. ou então deuxar assim... e quem usar o IE fica sem os efeitos!

Obrigado..... msm!

Vou continuar as pesquisas..
E entretanto se aparecer mais alguma dica para este problema...

Obrigado :)
 
Ohhh........ OK!!!

Quem nunca deu erros gramaticais que atire a primeira pedra!
Se tiver reparado, noutros posts também cometi alguns erros!
Sei perfeitamente que é botão e não butão como tinha escrito! Mas o cerne da questão estava mais que preceptível... não entendi o porquê da rectificação....

Mas ok... fica a explicação da diferença... para quem tiver dúvidas!

Obrigado.
 
Ele apenas te indicou um erro que podias ter feito sem notar.

Eu acho que a escrever normalmente também escreveria Butão, porque é Inglês é button e se calhar vem dai a confusão
 
Se calhar foi precipitado da minha parte.... e como ando ás aranhas com este meu problema....

Devo assim um pedido de desculpa ao KOmA....

Obrigado pela chamada de atenção... ás vezes são precisos!

:)
 
Inicie sessão ou registe-se para poder participar.
Back
Topo