Info-bulle avec IE, FF et Safari
Bonjour à tous,
J'ai des info-bulles qui s'affichent correctement sous IE
mais pas sous FF ni Safari...8O
Lorsque les info-bules sortent du cadre,
l'affichage devient instable...
Voici un exemple avec les définitions des mots en bleu soulignés en pointillés
qui sont présent dans la rubrique "description" et "en savoir plus" de la fiche:
http://www.souslesmers.fr/affichage/...3&retour=liste
La partie HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<tr>
<td colspan="2" valign="top" align="left">
<div id="bloc3">
<i> En savoir plus...</i><br />
<font size="4">
Les <a href="#" class="info">nom<span>définition</span></a>
</font><br />
</div><br />
</td>
</tr> |
et le CSS:
Code:
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
36
37
38
39
|
a.info {
position: relative;
color: navy;
text-decoration: none;
border-bottom: 1px navy dotted; /* on souligne le texte */
}
a.info span {
display: none; /* on masque l'infobulle */
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on d‚finit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par d‚faut en curseur d'aide */
}
a.info:hover span {
width: 300px;
font-size: 15px;
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 30px; /* on positionne notre infobulle */
left: 20px;
background: aliceblue;
color: navy;
padding: 3px;
border: 1px solid navy;
border-left: 4px solid navy;
}
div#bloc3
{
width: 790px;
overflow: auto;
border: 1px solid #000;
padding: 5px;
padding-top: 0px;
} |
Si vous avez une idée d'optimisation, elle sera la bienvenue !
Merci :D
Résolu en supprimant overflow: auto;
et en regroupant les CSS dans style.css
François
www.souslesmers.fr
