[résolu]Probleme infobulle CSS sous opéra

Salut a tous,

j'ai encore un probleme avec mon systeme d'infobulle en CSS.

Voici le code: (c'est la source en php si vous préférez le code affiché en html dite le moi )

<a class="info"  href="#"><img src="../imagesite/editeur/'; echo purification($Editeur[$u]); echo'.jpg" alt="'.$Editeur[$u].'" style="height:20px;"><span><b>'.$Editeur[$u].'</b></span></a>

Et le CSS associé:

a.info 
{
position: relative;
text-decoration: none;
color: black;
}
a.info img
{
position:relative;
}
a.info span{
display: none;
}
a.info:hover {
background: none;
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: -3px;
left:30px;
width:80px;
background-color: #CDCDEC;
text-align: center;
color: #141467;
padding: 2px;
border-style: solid;
border-width:1px;
border-color:#131365;
}

Donc au cas ou vous l'avez pas compris, ce qu'il y a dans le sapn ne s'affiche que lorsque la souris survol l'image.
Ca marche tres bien, le seul probleme est que sous opéra, l'infobulle reste affiché quand la souris quitte l'image .

Avez vous une solution?
Modifié par death83 (08 Feb 2006 - 22:18)

Bonjour,
C'est ceci destiné à IE que Opéra n'aime pas:

a.info:hover {
background: none;
z-index: 500;
}

Tu le supprimes et tu ajoutes ceci après la balise

</style> 

<!--[if lte IE 6]>
<style type="text/css">
.info:hover{z-index:1}
</style>
<![endif ]-->

Modifié par chmel (08 Feb 2006 - 23:48)

Bonjour,

Attention à la syntaxe de la condition pour IE. IE6.0 étant visé, ce n'est pas lt mais lte. Voir la FAQ du forum et Les syntaxes de commentaires conditionnels pour IE Windows

Sinon, une chose à savoir : l"information contenue dans cette info-bulle sera inaccessible en l'absence de dispositif de pointage (navigation au clavier)

Enfin, pourquoi diable ce <b> ?
Modifié par Laurent Denis (08 Feb 2006 - 08:24)

Bonjour,

Laurent Denis a écrit :
Bonjour,

Attention à la syntaxe de la condition pour IE. IE6.0 étant visé, ce n'est pas lt mais lte. Voir la FAQ du forum et Les syntaxes de commentaires conditionnels pour IE Windows

Autant pour moi

Laurent Denis a écrit :

Sinon, une chose à savoir : l"information contenue dans cette info-bulle sera inaccessible en l'absence de dispositif de pointage (navigation au clavier)

Affirmatif (sujet déja traité)

death83,
Si l'nfobulle title ne te plait pas, j'avais bricolé un script pour les récupérer en javascript
Modifié par chmel (08 Feb 2006 - 12:49)

chmel a écrit :
Bonjour,
C'est ceci destiné à IE que Opéra n'aime pas:

a.info:hover {
background: none;
z-index: 500;
}

Tu le supprimes et tu ajoutes ceci après la balise

</style> 

<!--[if lt IE 6]>
<style type="text/css">
.info:hover{z-index:1}
</style>
<![endif ]-->

J'ai fais ca:

<a class="info"  href="#"><img src="../imagesite/editeur/'; echo purification($Editeur[$u]); echo'.jpg" alt="'.$Editeur[$u].'"><span>'.$Editeur[$u].'</span><!--[if lte IE 6]><style type="text/css">.info:hover{z-index:1}</style><![endif ]--></a>

et j'ai bien suprimer l'autre parti de ma feuille de style mais plus rien ne se passe sous IE. (par contre ca marche bien sous opéra^^).
Modifié par death83 (08 Feb 2006 - 21:07)

C'est bon ca marche.

J'ia ajouter background:none a l'interieur de la condition.

Je ne connaissais pas cet technique pour mettre du CSS lisible juste pour internet explorer .

merci bien.^^

death83 a écrit :
C'est bon ca marche.

J'ia ajouter background:none a l'interieur de la condition.

Je ne connaissais pas cet technique pour mettre du CSS lisible juste pour internet explorer .

merci bien.^^

Tu n'as pas lu la correction de Laurent DENIS

comment ca?

death83 a écrit :
comment ca?

J'avait fait une erreur sur les commentaires conditionnels.

if lt IE 6

exclue IE6.
La bonne syntaxe pour exclure IE7 mais pas IE6 est :

<!--[if lt IE 7]>
<style type="text/css">
.info:hover,.info:active{z-index:1}
</style>
<![endif ]-->

Le hack background:none n'est pas necessaire.
Par contre, pour augmenter l'accessiblité pour la navigation clavier (touche TAB) :
Il faut ajouter les pseudo-class :active(pour IE), :focus (gecko), pour chaque règle comprenants :hover.
Opéra ne réagit pas malgré que sa navigation clavier sur les liens est A ou Ctrl+flèche bas pour descendre et Q ou Ctrl+flèche haut pour monter.

J'ai testé ceci , ça passe par Javascript, mais si c'est désactivé, il y a toujours le contenu accessible par une ancre. Qu'est-ce que tu en pense ?
Modifié par chmel (10 Feb 2006 - 13:31)