[Résolu] Bulle d'aide avec span : OK sur FF, KO sur IE

Bonjour,

Alors que cela marche sur un autre site ( http://www.ccela.com ), la même astuce ne fonctionne plus sur le site suivant avec IE : http://www.polygonis.com/titanox/ .

L'astuce est l'affichage sur fond jaune (c'est temporaire) d'une bulle d'aide au survol des photos des catalogues via un span caché par défaut et qui s'affiche sur le hover.

Des idées ?

Merci d'avance
Modifié par pyxosledisciple (12 Sep 2006 - 16:36)

Bonjour,

Sous IE, seul le :hover portant sur l'élément <a> fonctionne. Pour les autres éléments il faut passer par un javascript.
Par ailleurs si tu cherches à exploiter le selecteur a:hover span, il faut également que le sélecteur a:hover soit présent.

Donc c'est un hasard si cela marche sur un autre site.

Je l'ai codé comme suit, donc j'utilise le hover de a :

a:hover span {
	display: inline;
	position: absolute;
	top: 340px;
	left: 500px;
	width: 200px;
	/*height:1.5em;*/
	background: yellow;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}

Modifié par pyxosledisciple (23 Jun 2006 - 13:19)

a écrit :
Donc c'est un hasard si cela marche sur un autre site.

????

a écrit :
Je l'ai codé comme suit, donc j'utilise le hover de a :

a:hover span {
display: inline;
position: absolute;
top: 340px;
left: 500px;
width: 200px;
/*height:1.5em;*/
background: yellow;
text-decoration: none;
padding-left: 5px;
padding-right: 5px;
}

Bon, il te reste alors à ajouter quelque chose pour le sélecteur a:hover et si je suppose que tu as décrit correctement ce qui se passe hors :hover, et bien ça doit marcher.

Xavier a écrit :
Donc c'est un hasard si cela marche sur un autre site.

????
Oui tout fonctionne correctement sur le site www.ccela.com .

Xavier a écrit :
Bon, il te reste alors à ajouter quelque chose pour le sélecteur a:hover et si je suppose que tu as décrit correctement ce qui se passe hors :hover, et bien ça doit marcher.

Alors là, je ne comprends pas ce que je dois ajouter.

pyxosledisciple a écrit :
Xavier a écrit :

Donc c'est un hasard si cela marche sur un autre site.

????

Oui tout fonctionne correctement sur le site www.ccela.com .

Et le hasard dans tout ça ?

pyxosledisciple a écrit :
Xavier a écrit :
Bon, il te reste alors à ajouter quelque chose pour le sélecteur a:hover et si je suppose que tu as décrit correctement ce qui se passe hors :hover, et bien ça doit marcher.


Alors là, je ne comprends pas ce que je dois ajouter.

Tu dois ajouter

a:hover {blabla:blabla}

et je suppose que tu as aussi :

a span {
Ce qu'il faut
pour le style que tu souhaites
lorsque la souris 
n'est pas là
}

Il manque la définition du comportement du a:hover ?

Efectivement.

Xavier a écrit :
Efectivement.

J'ai bien tout défini et pourtant le problème persiste :
la page qui pose pb.

Une idée car là je sèche !!!

Merci d'avance

bonjour,

cherche du coté du layout ....

un zoom:1; ou un position:relative; sur a:hover; et l'ensemble de la balise s'affiche .

++

Bonjour à tous,

@gcyrillus

Mauvaise idée le choix du jaune ...

gcyrillus a écrit :
bonjour,

cherche du coté du layout ....

un zoom:1; ou un position:relative; sur a:hover; et l'ensemble de la balise s'affiche .

++

Effectivement pb de couleur et je comprends pas ta solution

Vero a écrit :
Mauvaise idée le choix du jaune ...

oui ! surtout quand on navigue avec le design flashy ! Vois rien moi !

oups, désolé et incompris ,
la premiere ligne : en noir , la piste a suivre
la deuxieme ligne :
le jaune n'etait pas par hasard, mais juste pour evité de donné la soluce sur un plateau , bon sinon , il suffit de selectionné le texte ....

++

gcyrillus a écrit :
oups, désolé et incompris ,
la premiere ligne : en noir , la piste a suivre
la deuxieme ligne :
le jaune n'etait pas par hasard, mais juste pour evité de donné la soluce sur un plateau , bon sinon , il suffit de selectionné le texte ....

++

J'ai essayé d'utiliser le position:relative sans succès car justement à cause d'un problème de coche "layer", l'affichage ne se fait plus dans la zone du bas, mais où se trouvent les images, ce n'est pas ce que je veux.

J'avais donc bien compris ton initiative didactique

je viens de telechargé la page pour la tester dans IE , et en ajoutant un
a:hover {zoom:1} l'info bulle apparait bien de la même façon dand firefoxe et IE6 et dans le conteneur #catalogues .
En effet avec un : ou un a:hover {position:relative;} le positionnement se fait a partir du point haut et gauche de la balise a (comportement du positionnement relatif normal )

Pour alors activer le "layout" avec une regle css valide (au lieu du zoom:1; proprietaire) et sans deplacer la bulle , il faut se tourné vers un display:inline-block; ( verifier comportement sous opera ou autre navigateur comprenant cette régles.
si il y a "interferences , il faudra alors servir la regle en commentaire conditionnels ... et le zoom:1 fera aussi l'affaire , car caché au validateur).

la seule difference d'affichage que je remarque se situe sur les info bulles "vides" qui n'apparaissent pas dans firefoxe pour cause de hauteur "nul" quand IE leurs donne une hauteur d'1em par defaut.

Par ailleurs le positionnement de l'info bulle est aussi determiné par la largeur de la fenetre du navigateur .

++

gcyrillus a écrit :
je viens de telechargé la page pour la tester dans IE , et en ajoutant un
a:hover {zoom:1} l'info bulle apparait bien de la même façon dand firefoxe et IE6 et dans le conteneur #catalogues .
En effet avec un : ou un a:hover {position:relative;} le positionnement se fait a partir du point haut et gauche de la balise a (comportement du positionnement relatif normal )

Je ne connaissais même pas l'existence de ce zoom:1 c'est pourquoi je n'ai pas compris ta première réponse.
Merci beaucoup.

a écrit :
Je ne connaissais même pas l'existence de ce zoom:1 c'est pourquoi je n'ai pas compris ta première réponse.
Merci beaucoup.

autant pour moi, ces problemes de layout si souvent evoqués sur le forum a propos de Internet Explorer que j'en oublie qu'il ne sont pas pour tous l'une des premiers piste a suivre quant un element a des comportement d'affichage recalcitrant.

bonne continuation.
(peut tu passer ton sujet en [ resolu] si c'est le cas ? )



<edit> blabla:blabla , je suis trollesque , n'est-il pas ? </edit>
Modifié par gcyrillus (21 Sep 2006 - 21:20)