petit soucis CSS sur les infobulles

**intraqual** · 17/06/2010, 08h19

j'ai un système d'infobulles qui marche bien en IE et pas en ffx ou chrome ...
j'utilise sûrement un "truc" css propre à IE mais lequel ?

Merci pour votre aide.

La classe CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<STYLE>
a.info{
    position:relative; 
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}
 
a.info:hover{z-index:25; background-color:#ff0}
 
a.info span{display: none}
 
a.info:hover span{ 
/*le contenu de la balise span ne 
sera visible que pour l'état a:hover */
 display:inline; 
 position:absolute;
 
 
    top:2em; left:2em; width:15em;
    border:1px solid #6699cc;
    background-color:#eeeeee; color:#6699cc;
    text-align: justify;
    font-weight:none;
    padding:1px;
 
    }
</STYLE>

Le code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="info" href="#" > TEXTE VISIBLE<span>texte de l'infobulle</span></a>

**pop_up** · 17/06/2010, 09h59

j'ai testé ce code avec IE6, FF3.6 et chrome5, et ça a l'air de fonctionner.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<style>
a.info{
    position:relative; 
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}
 
a.info:hover{z-index:25; background-color:#ff0}
 
a.info span{display: none}
 
a.info:hover span{ 
/*le contenu de la balise span ne 
sera visible que pour l'état a:hover */
 display:inline; 
 position:absolute;
 
 
    top:2em; left:2em; width:15em;
    border:1px solid #6699cc;
    background-color:#eeeeee; color:#6699cc;
    text-align: justify;
    font-weight:none;
    padding:1px;
 
    }
</style>
</head>
<body>
<a class="info" href="#" > TEXTE VISIBLE<span>texte de l'infobulle</span></a>
</body>
</html>

Qu'est ce qui ne fonctionne pas pour toi ?

**intraqual** · 17/06/2010, 10h52

Oui en principe ça doit être OK sur la majorité des navigateurs mais chez moi c'était OK avec IE8 et pas avec FFX & Chrome.

en fait l'appel de l'infobulle est un peu plus complexe que dans mon exemple, le survol se fait sur une case à cocher et pas sur du texte et j'avais des balise et autour du span. Je les ai enlevé et ça marche.

Désolé

<a class="info" href="#" >
<input name="7_0_0_W<? echo $n?>" id="7_0_0_W<? echo $n?>" type="checkbox" value="<? echo "$row[0] - $row[1]" ?>" />
<? $a=$row[3]-1; $b=$row[4]; $c=$row[5]; echo "Cloture : $month[$a] Période : $nechL[$c] Type : $ntypL[$b]"; ?></a>

petit soucis CSS sur les infobulles

CSS

Discussions similaires

Partager

Partager