Problème d'INPUT en image avec IE6/7/8

Bonjour à tous,

J'ai fait des formulaires avec des inputs en images, gérés en CSS.
Lorsque la souris passe sur l'input il change de couleur; c'est une image sauf que je change sa position en CSS au survol.
Sous Mozilla, pas de problème (comme toujours donc) mais sous les IE, aïe aïe !

Voici le résultat sous les IE, on voit qu'il y a le logo de l'image comme si l'image était manquante :


Voici mon code HTML

<input class="btnEnvoyer" type="image" name="" value="" />

Et mon code CSS

INPUT.btnEnvoyer {
    height: 26px;
    width: 112px;
    float: left;
    border: none;
    margin: 10px 0 20px 0;
    background: transparent url(../images/btnEnvoyer.png) no-repeat 0 -27px;
}


INPUT.btnEnvoyer:hover {
    height: 26px;
    width: 112px;
    float: left;
    background: transparent url(../images/btnEnvoyer.png) no-repeat 0 0;
}

Si vous avez une idée ou un hack pour les IE je suis preneur

Merci
Modifié par Gaaaz (18 May 2009 - 22:27)

je suis pas sure mais essai

INPUT.btnEnvoyer A:hover {
height: 26px;
width: 112px;
float: left;
background: transparent url(../images/btnEnvoyer.png) no-repeat 0 0;

}

Salut,

En même temps, tu utilises un bouton de type image sans en renseigner l'attribut src. Donc tout comme la balise img, quand cet attribut est manquant, IE affiche qu'il manque une image. Logique somme toute.

Hello

Merci pour les réponses.

To cherte_973 > heu non ça change rien ça en effet
To Agylus > En même temps c'est un INPUT et non une balise IMG

Bon je vais faire un lien sur une IMG et c'est tout... dommage, mais bon pas le choix je pense et sans passer par du JS of course.
En je viens de voir que sous Chrome ça change encore... bref...

Merci tout de même

C'est le hover qui ne fonctionne pas, ou les deux ? Tu aurais un exemple en ligne ?

Sinon, pourquoi re-spécifier la taille et le float au moment du hover ?
Modifié par mistike (19 May 2009 - 20:23)

Je savais bien que ça me disait quelque chose

Bon tu ne précises pas quelle version d'IE, mais essaye d'ajouter ça :

border: 0px solid #FFFFFF;

mistike a écrit :
C'est le hover qui ne fonctionne pas, ou les deux ? Tu aurais un exemple en ligne ?

Sinon, pourquoi re-spécifier la taille et le float au moment du hover ?

Nan les hovers fonctionnent très bien, c'est juste que j'ai sous les IE 6/7/8 il y a en plus le logo de l'image non trouvé, comme sur l'image jointe.

J'ai re spécifié car j'avais fait un copier/coller

Si ça marche j'épure

mistike a écrit :
Je savais bien que ça me disait quelque chose

Bon tu ne précises pas quelle version d'IE, mais essaye d'ajouter ça :

border: 0px solid #FFFFFF;

Si si en Objet et dans mon Topic aussi

Tous les IE 6/7/8

mistike a écrit :
Tu aurais un exemple en ligne ?

Je suis en local.

Sinon c'est le border qui gène, lui par défaut il est à 0 pour les IMG.
Pour être sur de bien me faire comprendre, j'ai le logo que IE met lorsqu'il ne trouve pas une image, on le voit sur mon bouton dans le 1er Topic, à gauche du "E"

Gaaaz a écrit :
To Agylus > En même temps c'est un INPUT et non une balise IMG

...


Qu'est ce que ça change ? Tu utilises un input de type image DONC l'attribut src, au même titre que la balise img, DOIT être renseigné.

Tu fondes tes connaissances sur de l'à peu près, ne voulant pas écouter les conseils de personnes plus expérimentées.
Un autre conseil, il y a un site qui défini les règles d'utilisation des balises et de leurs attributs. Ca s'appelle les recommandations du W3C. Je t'invite à t'en faire une petite lecture avant d'aller te coucher :
http://www.w3.org/TR/html401/interact/forms.html#adef-src

Aaaah en relisant le message, plus la réponse d'Agylus, je crois que je comprends. Ton image s'affiche (en background) MAIS par dessus, IE ajoute l'icone "image non trouvée" c'est ça ?

Donc effectivement le pb ne viendrait pas du background mais de l'image d'avant-plan, que IE attends mais que tu n'as pas spécifiée. Donc problème dans le HTML et pas dans le CSS

Donc deux solutions (sous réserve, je suis nulle en formulaires)

* soit tu utilises un input d'un autre type que "image" ==> par exemple "submit" ?
* soit tu lui passes l'attribut "src" !

Ceci dit avec la seconde solution, plus de hover avec le background...
Modifié par mistike (19 May 2009 - 23:18)

Agylus a écrit :

...


Qu'est ce que ça change ? Tu utilises un input de type image DONC l'attribut src, au même titre que la balise img, DOIT être renseigné.

Tu fondes tes connaissances sur de l'à peu près, ne voulant pas écouter les conseils de personnes plus expérimentées.
Un autre conseil, il y a un site qui défini les règles d'utilisation des balises et de leurs attributs. Ca s'appelle les recommandations du W3C. Je t'invite à t'en faire une petite lecture avant d'aller te coucher :
http://www.w3.org/TR/html401/interact/forms.html#adef-src

Ok je ne savais pas pour le coup du SRC dans un INPUT, et je connais le site en question car je puise mes infos ici aussi, mais j'ai été trop vite sur ce coup.
Je vais voir ça de près et revenir pour vous dire quoi.
Par contre rien ne me dit que tu étais plus expérimenté qu'un autre...honnêtement. J'ai pas trop aimé le ton de ta phrase pour le coup, mais c'est pas bien grave on va dire que je l'ai cherché.
Pour info j'en suis pas à mon essai sur des sites aux normes, mais je ne connais pas tout le WC3 par coeur donc effectivement un oubli ou zapé un truc ça arrive

mistike a écrit :
Aaaah en relisant le message, plus la réponse d'Agylus, je crois que je comprends. Ton image s'affiche (en background) MAIS par dessus, IE ajoute l'icone "image non trouvée" c'est ça ?

Donc effectivement le pb ne viendrait pas du background mais de l'image d'avant-plan, que IE attends mais que tu n'as pas spécifiée. Donc problème dans le HTML et pas dans le CSS

Donc deux solutions (sous réserve, je suis nulle en formulaires)

* soit tu utilises un input d'un autre type que "image" ==> par exemple "submit" ?
* soit tu lui passes l'attribut "src" !

Ceci dit avec la seconde solution, plus de hover avec le background...

Oui c'est ça
Ta réponse rejoint celle de Agylus, qui est plus expérimenté qu'on se le dise
Ok ok j'arrête
Un peu de taquinerie dans de mon de brut.. heu monde de W3C