Infobulle ne s'affiche pas correctement

[Miya Yoshizumi]

Bonjour, bonsoir!
Et oui, comme d'habitude j'ai un problème que je n'arrive pas à comprendre. x)
J'ai un petit problème avec mon infobulle sur ma page d'accueil, j'ai beau à regarder mon CSS, je vois pas où est le problème. Car sur Firefox, l'infobulle est niquel et quand je vais sur Safari, c'est pas vraiment jolie-jolie à voir. Alors que quand je vais sur d'autres forums avec Safari, je peux voir les infobulles correctement, donc je sais pas trop où est le problème avec mon infobulle.
Je vous donne quelques images pour voir.

Sur Safari vue sur mon infobulle dans la P.A.:


Sur Firefox vue sur mon infobulle dans la P.A.:


Voici la CSS de mon infobulle si besoin :

Code:

a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: hand;
position: relative;
text-decoration:none;
border: 0;

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 0px; /* on positionne notre infobulle */
  left: 50px;
background: #ffffff ; /* arrière-plan de l'infobulle */
color: #000000; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 4px solid AliceBlue;
  border-left: 2px solid MediumTurquoise;
border-right: 2px solid MediumTurquoise ;}


Voici le code HTML que j'utilise dans ma page d'accueil :

Code:

<a href="#" class="infobulle"><img style="border:4px solid AliceBlue; border-left: 2px solid MediumTurquoise; border-right: 2px solid MediumTurquoise;"src="http://img851.imageshack.us/img851/6281/iconpa.png" width="50" height="50"/><span><center><font color= MediumTurquoise >Hisashi Isamu</font><br><font color=MediumTurquoise >The Natural one</font><br>
<img src="http://img585.imageshack.us/img585/2056/iconpacolor.png"><div><a href="http://og-rpg-test.forumactif.org/u1rpg"_blank">Me</div><div><a href="http://og-rpg-test.forumactif.org/privmsg?mode=post&u=1"_blank">M.P. me</div>

Merci d'avance à celle ou celui qui me donnera un petit coup de main. ^^

[Miya Yoshizumi]

Uhhh... Un petit up? n_n''

[Miya Yoshizumi]

Up. ~

[Miya Yoshizumi]

Nyup.. ~

[Miya Yoshizumi]

Up. ~

[Invité]

Bonsoir,

Safari faisait la tête, mais Firefox 4 aussi sur mon forum test . En remplaçant <a href="#" class="infobulle">....</a> par <div class="infobulle">....</div> dans votre code

Code:

<div class="infobulle"><img style="border:4px solid AliceBlue; border-left: 2px solid MediumTurquoise; border-right: 2px solid MediumTurquoise;"src="http://img851.imageshack.us/img851/6281/iconpa.png" width="50" height="50"/><span><center><font color= MediumTurquoise >Hisashi Isamu</font><br><font color=MediumTurquoise >The Natural one</font><br>
<img src="http://img585.imageshack.us/img585/2056/iconpacolor.png"><div><a href="http://og-rpg-test.forumactif.org/u1rpg"_blank">Me</div><div><a href="http://og-rpg-test.forumactif.org/privmsg?mode=post&u=1"_blank">M.P. me</div></span></div>

et en changeant le CSS comme ci-dessous, ça fonctionne:

Code:

.infobulle {
      position: relative;
    }

.infobulle span {
      display: none; /* ceci masque l'infobulle */
    }
.infobulle:hover {
      background: none; /* correction d'un bug IE */
      z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
    cursor: hand;
    position: relative;
    text-decoration:none;
    border: 0;

    }
.infobulle:hover span {
      display: inline; /* ceci affiche l'infobulle */
      position: absolute;
    white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
    top: 0px; /* on positionne notre infobulle */
      left: 50px;
    background: #ffffff ; /* arrière-plan de l'infobulle */
    color: #000000; /* texte dans l'infobulle */
      padding: 3px;

      /* bordures de votre infobulle*/
      border: 4px solid AliceBlue;
      border-left: 2px solid MediumTurquoise;
    border-right: 2px solid MediumTurquoise ;}

Cordialement.

[Miya Yoshizumi]

Oh! Merci beaucoup Isolde!
Ce code marche parfaitement. :3
Vous êtes vraiment ma sauveuse! x)
Merci encore!