1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

hover e IE [CSS] - problemas

Discussão em 'Web Development' iniciada por toblesu, 21 de Março de 2009. (Respostas: 10; Visualizações: 3362)

  1. toblesu

    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
     
  2. geoblast

    geoblast Power Member

    .botao {propriedades}
    .botao:visited {propriedades}
    .botao:hover {propriedades}
    .botao:active, .botao:focus {propriedades}
     
  3. toblesu

    toblesu Power Member

    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!!!
     
  4. geoblast

    geoblast Power Member

    coloca aqui o css e o html, para ver se está tudo me ordem
     
  5. toblesu

    toblesu Power Member

    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............
     
  6. geoblast

    geoblast Power Member

    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"
     
  7. toblesu

    toblesu Power Member

    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 :)
     
  8. K0mA

    K0mA Power Member

  9. toblesu

    toblesu Power Member

    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.
     
  10. SeventhDoor

    SeventhDoor Power Member

    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
     
  11. toblesu

    toblesu Power Member

    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!

    :)
     

Partilhar esta Página