Alors les explications maintenant.
Dans le premier cas, celui qui marche sous firefox et pas sous IE, c'est visiblement à cause du fait que l'attribut :hover ne s'applique qu'a une balise "lien" (<a href="blabla">) sous internet explorer, alors que firefox semble donné un peu plus de liberté.
Donc sous IE, je n'arrive pas à voir ma seconde image de fond, ni le changement de couleur appliqué dans la class button:hover
Donc j'ai essayé de tricher un peu avec la 2e méthode, qui semble fonctionner sous IE (juste la couleur du lien qui ne fonctionne pas avec le hover (color: #FF7200)). Sinon, il charge correctement l'image bouton2.png lorsque je passe la souris sur le bouton.
Par contre, le gros probleme sous firefox, c'est qu'il semble favoriser la balise du lien <a> par rapport à la balise <input>, donc en fait, il n'envoie pas de formulaire lorsque je clique sur le bouton...
Enfin, bref, j'ai l'impression de tourner un peu en rond depuis hier. Donc si quelqu'un à une solution qui marche sous les 2 systemes, ca m'interesse grandement.
Merci
PS: Je sais pas si j'ai été très clair, hésitez pas à poser des questions ;)
il ne faudrait mettre le '<input>' dans un lien, cela n'a pas de sens.
donc essai de coder le même comportement mais sur le '<input>'.
sinon pour le défaut d'affichage, je pense qu'il manque un {display:block;} dans le sélecteur 'a.button'.
Mais le :hover ne marche que sur les liens dans internet explorer ah oui ! je l'oublie à chaque fois celle-là !
je viens de faire les essais avec '<input>' dans un lien, ça fonctionne au poil même sous IE6.
utilise cette technique plutôt que de priver les utilisateur de IE6, ils ont encore très nombreux !!!
j'ai utilisé ça :
form a input
{
border:none;
padding-left:24px; /* pour décaler le texte, qu'il ne chevauche pas mon image*/
background-color:transparent;
cursor: pointer;
}
form a
{
background-image:url(ressources/fail.png);
background-repeat:no-repeat;
background-color:#aaa;
text-decoration:none;
}
form a:hover
{
background-image:url(ressources/success.png);
}
Oui, ,je sais qu'il ne faudrait pas mettre le <input> dans un lien...
Mais le :hover ne marche que sur les liens dans internet explorer :-/
Et pour poster mon formulaire, à part le <input>... je vois pas trop
Et effectivement, j'ai oublié le display: block; mais ca ne change rien au probleme.
Est ce qu'il est possible de poster un formulaire en cliquant sur un lien ? c'est à dire sans passer par <button> ou <input>
Dans le pire des cas, je ferais 2 cas différent entre firefox et IE, mais après je peux pas vraiment m'amuser à tester tous les navigateurs, donc je préfererais une solution "universelle".
Merci Jérémy, mais je préfèrerais éviter le javascript.
De toute facon, a priori mon probleme à pas vraiment de solutions tel que je le souhaiterais.
A priori, la première solution doit marcher sur IE >= 6
Donc, je crois que je vais garder la première syntaxe, et les utilisateurs auront cas avoir une version d'IE >= 6 pour avoir de jolies petits effets. Sinon, ils auront cas faire comme tout le monde et installer firefox :D
Effectivement, ca marche sous IE...
Mais pas sous firefox, firefox ne prend pas le input en compte j'ai l'impression, il gère le lien et ne post pas le formulaire.