Rollover sans JS: Ok sous Firefox mais pas sous IE

Bonjour le forum,

j'ai voulu adapter un rollover sans javascript sur un formulaire.
Je me suis servi de ce Tuto:
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

J'ai réussi a faire une adaptation ok sous Firefox,
mais de nombreux bugs d'affichage sous IE comme vous pouvez voir ici:

-***************

Est ce qu'il y a moyen d'adapter le styles.css que voici:

#srch-text {font-size: x-large;width:274px;
	height:28px;
	background:url(images/input.gif) no-repeat left top;
	border:none;
	padding:16px 26px;}
#srch-text:hover { background: url(images/input.gif) no-repeat 0 -62px ; }
#srch-text:focus {background: url(images/input.gif) no-repeat 0 -62px ; }

#srch-choix {font-size: x-large;width:242px;
	height:28px;
	background:url(images/formulaire.gif) no-repeat left top;
	border:0;
	padding:19px 26px}
#srch-choix:hover { }
#srch-choix:focus { }

#srch-bot {width:71px;
	height:68px;
	color:#FFF;
	padding:26px 35px;
	background:url(images/button.gif) no-repeat left top;
	cursor:pointer;
	border:none; }
#srch-bot:hover {background:url(images/button.gif) no-repeat 0 -68px ; }

Merci de votre coup de main.
bonne journée
Modifié par koala64 (28 Oct 2007 - 16:34)

Salut aieaieaie caramba ,

la pseudo-classe hover ne fonctionne qu'avec les liens (balises <a>) sous IE6 donc soit il faut remplacer tes <input> par des liens, soit il faut faire cela en Javacript à l'aide de commentaires conditionnels ...

A+
Modifié par Heyoan (28 Oct 2007 - 13:46)

Bonjour Heyoan,
merci pour ce debut de piste, mais dans ce cas là pourquoi cela fonctione t'il parfaitement pour le premier champ du formulaire, qui lui n'est pas non plus un lien?

Bonjour aieaieaie,

Il me semble que tu n'aies pas lu les règles du forum, la règle 14 plus particulièrement.

Je supprime donc ton url et t'invite à reproduire le problème sur une page test.

Merci pour ta compréhension.

PS : Ca ne fonctionne pas sur IE6, non. En toute logique, un rollover devrait être fait via JS; la pseudo-classe hover de CSS est un plus, souvent plus simple à mettre en place, mais ce n'est pas le rôle premier de ce langage que de s'occuper du comportement.
Modifié par koala64 (28 Oct 2007 - 16:39)

aie*3,

Cela ne fonctionne pas sous IE6 comme te l'a précisé Heyoan... Pour info, ton roll-over fonctionne sur le premier input et l'image submit sous firefox ( donc pas sur ta liste de choix, et je ne sais d'ailleurs pas si cela est envisageable ?...) et sous IE7 seul le premier bouton fonctionne correctement
Modifié par 6l20 (28 Oct 2007 - 20:02)

Re,

@koala
Désolé je pensais que la page sur laquelle on arrive qui est sans contenu .... suffise!
Mais effectivement l'idée de la page de test est la solution.

@6L20
oui je constate la même chose,
ça marche bien avec Firefox, pas avec IE!
Mais quand on me dis pas possible avec IE, et que je vois que ça fonctionne bien sur le premier élément du formulaire, .... , j'essaye de comprendre.

Ça peut être un autre début de piste, non?

Sinon, comment faites vous pour ce genre d'effet "rollover" sur des formulaire, en évitant le flash et le Javascript?

Même les commentaires conditionnels ne permettent pas cela, si j'ai bien compris, juste d'éviter d'avoir des bugs.
Merci pour votre lanterne!

aie*3,

Je ne comprend pas ce que tu ne comprends pas...

a écrit :

@6L20
...
Mais quand on me dis pas possible avec IE, et que je vois que ça fonctionne bien sur le premier élément du formulaire, .... , j'essaye de comprendre.

IE7 a apporté des améliorations dans l'interprétation des propriétés css, quelques unes en tout cas, ce qui permet entre autre de rendre possible le rollover sur ton premier input sous IE7, pour ton select, à ma connaissance (assez limitée) pas de possibilité de produire cet effet ( tu ne l'as d'ailleurs pas tenté dans ta feuille de style bien que ton image formulaire.gif semble toute disposée à appliquer cet effet...) mais tu peux effectivement lui associer une image de fond, concernant ton dernier input, il doit pouvoir fonctionner sans trop de soucis sous Firefox et IE7...

Maintenant lorsque l'on te dit que cela ne fonctionne pas sous la version 6 d'internet explorer et que l'on t'explique que la pseudo-classe hover ne fonctionne qu'avec les liens (balises <a>) sous IE6, et que tu sembles toujours dubitative...je ne vois pas ce que nous pourrions te dire d'autre pour te convaincre ?...

Quoiqu'il en soit, j'ai pu voir que tu envisageais une autre voie qui n'est sans doute pas plus mal, au regard de la fonction que l'on demande à un formulaire de recherche...

Bonne continuation.

6l20 a écrit :

Maintenant lorsque l'on te dit que cela ne fonctionne pas sous la version 6 d'internet explorer et que l'on t'explique que la pseudo-classe hover ne fonctionne qu'avec les liens (balises <a>) sous IE6, et que tu sembles toujours dubitative...je ne vois pas ce que nous pourrions te dire d'autre pour te convaincre ?...
Bonne continuation.

C'est bon! maintenant j'ai pigé!

En fait j'ai la version 7, et effectivement, je voyais un changement d'état.
Maintenant c'est plus clair, merci 6l20.

Oui effectivement, sachant cela j'ai envisagé une autre solution.
Encore merci à tous ces intervenants, et bravo pour la qualité des infos de ce site.