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:
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>
et le 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
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

Résolu en supprimant overflow: auto;
et en regroupant les CSS dans style.css

François
www.souslesmers.fr