Bonjour à tous,
J'ai des info-bulles qui s'affichent correctement sous IE
mais pas sous FF ni Safari...
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:
et le CSS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Si vous avez une idée d'optimisation, elle sera la bienvenue !
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
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 dfinit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par dfaut 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; }
Merci
Résolu en supprimant overflow: auto;
et en regroupant les CSS dans style.css
François
www.souslesmers.fr
Partager