Ploblème sous FireFox (Infos Bulles)

Ploblème sous FireFox (Infos Bulles) - HTML/CSS - Programmation

Marsh Posté le 14-01-2010 à 12:25:44    

Salut,
 
J'ai crée ce site (www.toitetmoi.be) sous IE(>Ver 6) tout fonctionne trés bien.
Lorsque je suis sous FireFox, j'ai un petit soucis au niveau d'une info bulle.  
 
En fait, sur la page d'acceil, j'ai une zone qui reprend le plan du site et dans la partie "Qui sommes-nous ?", j'ai un lien vers "Permanences du Service Locataires" avec une petite loupe (à droite). Sous IE, lorsque je survole la loupe, j'ai une image (un plan) qui apparait avec des liens sur des images dedans (images avec un A). Sous FireFox, cette info bulle se retrouve en haut à gauche de ma page d'accueil (testez de vous même avec Firefox vous verez bien mon problème).
 
Que se passe-t-il?
pour afficher mon info bulle j'utilise css : ex.  

Code :
  1. <a class="tooltip1">&nbsp;<img src="images/loupe.png" alt="plans" title="plans" width="10" height="10" />
  2.     <em>
  3.         <span>
  4.         </span>
  5.     </em>
  6. </a>


 

Code :
  1. a.tooltip1 em {
  2.     display:none;
  3. }
  5. a.tooltip1:hover {
  6.     border: 0;
  7.     position: relative;
  8.     z-index: 500;
  9.     text-decoration:none;
  10. }
  12. a.tooltip1:hover em {
  13.     font-style: normal;
  14.     display: block;
  15.     position: absolute;
  16.     top: 12px;
  17.     left: -100px;
  18.     padding: 5px;
  19.     color: #000;
  20.     border: 0px solid #bbb;
  21.     background: #ffc;
  22.     width:497px;
  23. }
  25. a.tooltip1:hover em span {
  26.     position: absolute;
  27.     top: -5px;
  28.     left: 95px;
  29.     height: 5px;
  30.     width: 10px;
  31.     background: transparent url(../images/infobulletop00.gif);
  32.     margin:0;
  33.     padding: 0;
  34.     border: 0;
  35. }


 
Je ne suis pas un expert en création de sites internet (j'ai dû faire ce site pour notre société - j'ai quand même mis du temps à comprendre le PHP+CSS etc...;))
Si quelqu'un pouvait m'aider, Merci !

Message cité 1 fois
Reply

Marsh Posté le 14-01-2010 à 12:25:44   

Reply

Marsh Posté le 14-01-2010 à 16:13:59    

personne pour m'aider ?

Reply

Marsh Posté le 14-01-2010 à 16:48:14    

recep a écrit :

Salut,
 
J'ai crée ce site (www.toitetmoi.be) sous IE(>Ver 6) tout fonctionne trés bien.
Lorsque je suis sous FireFox, j'ai un petit soucis au niveau d'une info bulle.  
 
En fait, sur la page d'acceil, j'ai une zone qui reprend le plan du site et dans la partie "Qui sommes-nous ?", j'ai un lien vers "Permanences du Service Locataires" avec une petite loupe (à droite). Sous IE, lorsque je survole la loupe, j'ai une image (un plan) qui apparait avec des liens sur des images dedans (images avec un A). Sous FireFox, cette info bulle se retrouve en haut à gauche de ma page d'accueil (testez de vous même avec Firefox vous verez bien mon problème).
 
Que se passe-t-il?
pour afficher mon info bulle j'utilise css : ex.  

Code :
  1. <a class="tooltip1">&nbsp;<img src="images/loupe.png" alt="plans" title="plans" width="10" height="10" />
  2.     <em>
  3.         <span>
  4.         </span>
  5.     </em>
  6. </a>


 

Code :
  1. a.tooltip1 em {
  2.     display:none;
  3. }
  5. a.tooltip1:hover {
  6.     border: 0;
  7.     position: relative;
  8.     z-index: 500;
  9.     text-decoration:none;
  10. }
  12. a.tooltip1:hover em {
  13.     font-style: normal;
  14.     display: block;
  15.     position: absolute;
  16.     top: 12px;
  17.     left: -100px;
  18.     padding: 5px;
  19.     color: #000;
  20.     border: 0px solid #bbb;
  21.     background: #ffc;
  22.     width:497px;
  23. }
  25. a.tooltip1:hover em span {
  26.     position: absolute;
  27.     top: -5px;
  28.     left: 95px;
  29.     height: 5px;
  30.     width: 10px;
  31.     background: transparent url(../images/infobulletop00.gif);
  32.     margin:0;
  33.     padding: 0;
  34.     border: 0;
  35. }


 
Je ne suis pas un expert en création de sites internet (j'ai dû faire ce site pour notre société - j'ai quand même mis du temps à comprendre le PHP+CSS etc...;))
Si quelqu'un pouvait m'aider, Merci !


 
Voilà, j'ai trouvé une solution, mais est-ce que c'est correcte comme méthode?
 
Voilà, au lieu d'utiliser une balise <a></a>, j'ai mis <span></span> et aussi j'ai modifié le fichier css en conséquence:
 

Code :
  1. <span class="tooltip1">&nbsp;<img src="images/loupe.png" alt="plans" title="plans" width="10" height="10" />
  2.     <em>
  3.         <span>
  4.         </span>
  5.     </em>
  6. </span>


Code :
  1. span.tooltip1 em {
  2.     display:none;
  3. }
  5. span.tooltip1:hover {
  6.     border: 0;
  7.     position: relative;
  8.     z-index: 500;
  9.     text-decoration:none;
  10. }
  12. span.tooltip1:hover em {
  13.     font-style: normal;
  14.     display: block;
  15.     position: absolute;
  16.     top: 12px;
  17.     left: -100px;
  18.     padding: 5px;
  19.     color: #000;
  20.     border: 0px solid #bbb;
  21.     background: #ffc;
  22.     width:497px;
  23. }
  25. span.tooltip1:hover em span {
  26.     position: absolute;
  27.     top: -5px;
  28.     left: 95px;
  29.     height: 5px;
  30.     width: 10px;
  31.     background: transparent url(../images/infobulletop00.gif);
  32.     margin:0;
  33.     padding: 0;
  34.     border: 0;
  35. }


Comme ça marche, mais est-ce correcte ?

Reply

Marsh Posté le 14-01-2010 à 17:28:08    

Cela ne fonctionnera pas sur IE6, il en comprends pas les hover sur autre chose que des <a>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed