Ploblème sous FireFox (Infos Bulles)

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Ploblème sous FireFox (Infos Bulles)

recep

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 :

<a class="tooltip1"> <img src="images/loupe.png" alt="plans" title="plans" width="10" height="10" />
</a>

Code :

a.tooltip1 em {
display:none;
}
a.tooltip1:hover {
border: 0;
position: relative;
z-index: 500;
text-decoration:none;
}
a.tooltip1:hover em {
font-style: normal;
display: block;
position: absolute;
top: 12px;
left: -100px;
padding: 5px;
color: #000;
border: 0px solid #bbb;
background: #ffc;
width:497px;
}
a.tooltip1:hover em span {
position: absolute;
top: -5px;
left: 95px;
height: 5px;
width: 10px;
background: transparent url(../images/infobulletop00.gif);
margin:0;
padding: 0;
border: 0;
}

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

Publicité

recep

personne pour m'aider ?

recep

recep a écrit :

Code :

<a class="tooltip1"> <img src="images/loupe.png" alt="plans" title="plans" width="10" height="10" />
</a>

Code :

a.tooltip1 em {
display:none;
}
a.tooltip1:hover {
border: 0;
position: relative;
z-index: 500;
text-decoration:none;
}
a.tooltip1:hover em {
font-style: normal;
display: block;
position: absolute;
top: 12px;
left: -100px;
padding: 5px;
color: #000;
border: 0px solid #bbb;
background: #ffc;
width:497px;
}
a.tooltip1:hover em span {
position: absolute;
top: -5px;
left: 95px;
height: 5px;
width: 10px;
background: transparent url(../images/infobulletop00.gif);
margin:0;
padding: 0;
border: 0;
}

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 et aussi j'ai modifié le fichier css en conséquence:

Code :

<img src="images/loupe.png" alt="plans" title="plans" width="10" height="10" />

Code :

span.tooltip1 em {
display:none;
}
span.tooltip1:hover {
border: 0;
position: relative;
z-index: 500;
text-decoration:none;
}
span.tooltip1:hover em {
font-style: normal;
display: block;
position: absolute;
top: 12px;
left: -100px;
padding: 5px;
color: #000;
border: 0px solid #bbb;
background: #ffc;
width:497px;
}
span.tooltip1:hover em span {
position: absolute;
top: -5px;
left: 95px;
height: 5px;
width: 10px;
background: transparent url(../images/infobulletop00.gif);
margin:0;
padding: 0;
border: 0;
}

Comme ça marche, mais est-ce correcte ?

David Boring

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

FORUM HardWare.fr

Programmation

HTML/CSS

Ploblème sous FireFox (Infos Bulles)

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

Page générée en 0.054 secondes