[Resolu]Probleme sous IE avec technique pop up css a:hover span

Salut,

j'ai pourtant déja réussi a faire fonctionner cette methode sous IE et f.fox, methode qui consiste a masquer un span qui se trouve dans un <a>, et le faire apparaitre en rollover sur le <a> à l'aide la propriété display.

Ca donne a peu pres ça :

#sponsors ul li a span{display: none;}

#sponsors ul li a:hover span{
position: absolute;
top: 51px;
left: 490px;
display: block;
}

Mais là, sous IE rien à faire, mon image dans le span masqué s'affiche pas en rollover sur le <a>, ou peut etre qu'elle s'affiche mais je sais pas où !

J'ai "bidouiller" dans tout les sens sans succès.

Voici donc la page ou j'ai le soucis .

J'ai soupsonner les styles déja existants (les externes que j'appel), je les ai virés mais ça n'a rien changer.

Autre chose, comment se debrouiller avec le positionnement du span quand on veux faire une sorte de roll over image en fait (l'image apparaissant se supperposant parfaitement à celle non masquée ds le <a>), parceque là , si jamais le visiteur redimensionne la taille du texte, la superposition est "biaisée" vu que j'ai pas trouvé mieux que le positionnement absolue...

(le code plus haut est pris sur cette page où ça fonctionne très bien sous IE et ffox...et où une fois encore j'ai positionné les span en absolue car en relatif ça m'éspassait mes <li>, et sans positionnement ça les affichait en bout de li et c'etait moche aussi...)

Merci d'avance pour votre aide et points de vues.


Modifié par Hum (17 Jul 2006 - 17:59)

Bonsoir,

IE ne prendra en compte a:hover span que si une règle a:hover est également présente.

Pour le placement de l'image, il suffit de le faire relativement au lien et non relativement au body (a {position:relative})

Mais cette bidouille des span et du roll-over est tout sauf satisfaisante pour l'accessibilité et la qualité de la page (contenu non accessible au clavier, rendu dégradé sans CSS, etc).

Laurent Denis a écrit :

IE ne prendra en compte a:hover span que si une règle a:hover est également présente.

Bonsoir et merci de ta réponse,
je viens de le faire et ai virer mes styles externes et épurer ma page au maximum pour tester correctement, passé mes styles et ma page au validateur, ça n'a rien changé.

Laurent Denis a écrit :

il suffit de le faire relativement au lien et non relativement au body (a {position:relative})

Un décalage est pourtant toujours présent après redimensionnement du texte.
Puis ce positionnement m'agrandit ma page de quelques centaines de pixels vers le bas, j'ai essayé un background-color sur le span masqué pour voir ce qu'il se passait, mais rien, de toute façon j'ai dimensionné le span à la taille de l'image comme il est en display: block quand il s'affiche, je comprend pas...
Et je ne sais pas si c'est l'apparition du scrollbar vertical quand je survol mon image qui donne ça mais j'arrive plus a superposer mes images parfaitement maintenant.
Je viens de remarquer qu'apres apparition de l'img ds le span, la zone réactive couvre jusqu'en bas de la page (l'espace vertical rajouté due a la position relative), pour revenir à "létat initial" je dois sortir sur les cotés.

Laurent Denis a écrit :

Mais cette bidouille des span et du roll-over est tout sauf satisfaisante pour l'accessibilité et la qualité de la page (contenu non accessible au clavier, rendu dégradé sans CSS, etc).

D'accord, tu as une autre solution à me proposer pour un effet similaire ?
C'était pour eviter le javascript.

Je dois faire quelque chose de travers ... ou il y a une subtilité que je ne connais pas.

Merci encore.

La page avec mes changements selon tes conseils.
Modifié par Hum (16 Jul 2006 - 23:51)

Hum a écrit :
C'était pour eviter le javascript.

Je dois faire quelque chose de travers ... ou il y a une subtilité que je ne connais pas.

La subtilité, c'est peut-être que Javascript est plus fait pour ce genre de choses que les bidouillages avec du CSS.

Quelle est l'information ? On veut présenter deux images, pour comparaison.
Donc il faut que sans Javascript et sans CSS, les deux images soient présentes dans le document, car elles font partie de l'information de base de la page.
Ensuite, rien n'interdit de faire un script javascript qui cache la deuxième image au chargement de la page, et ne la montre qu'au survol de la première image. Un truc du genre.

Javascript ce n'est pas le mal, hein ! Ce qui est gênant, c'est de vouloir remplacer systématiquement certains effets dynamiques javascript par des bidouilles CSS à base de propriétés plus ou moins fortement détournées.

a écrit :
vouloir remplacer systématiquement certains effets dynamiques javascript par des bidouilles CSS à base de propriétés plus ou moins fortement détournées.

C'est effectivement ce que je cherche souvent a faire .
Mais aussi parceque j'ai lu que le javascript pouvais etre plus souvent desactivé que le CSS...

D'ailleurs, j'aimerai savoir quels peuvent etrent les cas où le css serait desactivé (ou meme le javascript d'ailleurs), pourquoi un utilisateur "normal, de base" s'amuserai a faire ça ?

Je pense etre l'exemple du gars de base qui farfouille pas dans des trucs qu'il connait pas, et jamais j'ai touché a quoi que ce soit dans les options du navigateur et ai donc toujours eu le CSS et javascript d'activé.

Je pense que l'on doit etre beaucoup dans ce cas non ?

Quel peut etre l'interet ou la raison de desactiver l'un ou l'autre ?

Laurent Denis a écrit :
rendu dégradé sans CSS

Mais sans javascript si l'effet est mis en place en js cela revient au meme non ?
Modifié par Hum (17 Jul 2006 - 15:29)

Re,

m' étant assez ecarté de mon probleme de départ avec mes nombreuses questions, je remet ce lien qui pointe vers la page ou un systeme de roll over image en CSS fonctionne sous ffox mais pas sous IE.

Je conviens de ce qui a été dit plus haut par rapport à l'utilisation de cette technique mais j'aimerai vraiment savoir pour quoi ça coince là, ça me taquine et je trouve pas.

Merci et bonne journée !

Salut,

A vrai dire je ne sais pas vraiment pourquoi ça coince, mais la solution passe par ajouter une déclaration sur a:hover (comme dit plus haut). Il y a plusieurs possibilités dont une qu'on voit souvent :

a:hover {background: none;}

Salut,

j'y avais pensé et avais mis un

a:hover {background:transparent;}

Je viens d'essayer avec none, sans effets.

Merci.
Modifié par Hum (17 Jul 2006 - 17:27)

Hum a écrit :
Je viens d'essayer avec none, sans effets.

Tiens, bizarre : je viens de copier-coller ton code en ajoutant simplement ce background:none et ça fonctionne. Du moins avec IE6.
Modifié par Alan (17 Jul 2006 - 17:47)

J'avais mis :

a:hover {background-color: none;}

au lieu de

a:hover {background: none;}

Maintenant , effectivement ça marche.

Bien vu Alan et merci d'avoir pris le temps de tester

Mais je ne comprend toujours pas pourquoi quand le <a> est en positionnement relatif, au survol de celui ci quelques centaines de pixels s'ajoutent a la hauteur de ma page .
Modifié par Hum (17 Jul 2006 - 18:02)

Au sujet du javascript désactivé, ça concerne un pourcentage réduit d'utilisateurs (on dit souvent 10%, mais c'est moins que ça je pense). De plus, ce public :
– utilise des navigateurs non javascript (lecteurs d'écran, navigateurs non graphiques) ;
– ou bien utilise des navigateurs graphiques pour lequel ils ont désactivé javascript.

Dans le premier cas, du moment que le site est accessible sans javascript, tout va bien.
Dans le deuxième cas, il s'agit d'utilisateurs qui ont l'habitude de voir certains effets graphiques ou certaines fonctionnalités bridées ou dégradés à cause de cette non activation. Là encore, il s'agit de s'assurer que 1/ les fonctionnalités de base et le contenu restent accessibles sans javascript et 2/ l'aspect graphique reste cohérent.

Bon, il reste le cas des utilisateurs qui utilisent au boulot un navigateur dont l'administrateur a désactivé Javascript, ou tous les autres cas possibles et imaginables… Mais le principe reste : accessibilité même sans javascript, dégradation élégante.
Modifié par mpop (17 Jul 2006 - 22:48)

Salut mpop,

Merci beaucoup, tu m'a donné tout ce que je voulais !