Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2960 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Ploblème sous FireFox (Infos Bulles)

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Ploblème sous FireFox (Infos Bulles)

n°1957869
recep
Posté le 14-01-2010 à 12:25:44  profilanswer
 

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


 
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 !

mood
Publicité
Posté le 14-01-2010 à 12:25:44  profilanswer
 

n°1957974
recep
Posté le 14-01-2010 à 16:13:59  profilanswer
 

personne pour m'aider ?

n°1957999
recep
Posté le 14-01-2010 à 16:48:14  profilanswer
 

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


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


Comme ça marche, mais est-ce correcte ?

n°1958020
David Bori​ng
Posté le 14-01-2010 à 17:28:08  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Ploblème sous FireFox (Infos Bulles)

 

Sujets relatifs
[résolu] Probleme alignement menu sous FirefoxDifférence comportement entre firefox et ie
Firefox souligne toutes les imagesProbleme de compatibilite entre IE et Firefox
Probleme vidéo inséré sous FirefoxFirefox et une fonction javascript
[Résolu] Lien non cliquable sous Firefoxproblème firefox/CSS [RESOLU]
[Plugin Firefox] Texte d'une pageProblème lecture vidéo flash Firefox
Plus de sujets relatifs à : Ploblème sous FireFox (Infos Bulles)


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR