[resolu]Positionnnement infobulles IE et Firefox

Bonjour

j'ai suivi un tuto:ici sur les infobulles. cela fonctionne à merveille.

Le seul soucis, c'est que si je rajoute une image, l'info bulle ne se positionne plus de la même façon sous Firefox et sous IE;
ex:

 a em {
       display:none;	   
}
 img{
	border: 0;	
} 
 a:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
 a:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 25px;  /* permet de positionner la hauteur de l'infobulle */
    left: -10px;  /*son placement horizontal, notez que dans mon exemple sa valeur est négative afin que l'infobulle soit en retrait du texte survolé */
    padding: 5px;
    color: #000; /* indique la couleur de la police de l'infobulle */
    border: 1px solid #bbb; /*permet d'indiquer la largeur des bordures de l'infobulle ainsi que son style et sa couleur*/
    background: #ffc; /* sa couleur de fond */
    width:170px; /* renseigne la largeur de l'infobulle. */
    text-align: left;
}
a:hover em span {
    /* permet de positionner une image en haut de l'infobulle lui donnant ce style particulier de bulle de BD*/
    position: absolute;
    top: -7px;  /* doit correspondre à la valeur négative de la hauteur de l'image */
    left: 15px;  /* la positionne horizontalement par rapport au début de l'infobulle */
    height: 7px;  /* correspondent à la hauteur de l'image */
    width: 11px;  /* correspondent à la largeur de l'image */
    background: transparent url(../img/img_album/infobulletop00.gif);  /* permet de renseigner l'url de l'image */ /* supprime si pas d'image */
    background-repeat: no-repeat;
    margin:0;
    padding: 0;
    border: 0;
    }

Donc si j'appelle sur un lien comme ceci, cela fonctionne et place l'infobulle correctement à 25px sous le lien.

<a href="#">mon lien<em><span></span</em></a>

par contre si j'insère une image, la bulle est positionner sur IE en haut, et sous firefox en bas.

<a href="#"><img src="img/img_album/gg_2.jpg" widht="89" height="110" alt="" title="" /><br />
    Ma photo<em><span></span><strong>Nom:</strong> <i>Blablablablablabla</i><br /><strong>Prénom:</strong> <i>Blablablablablabla</i><br /><strong>Age:</strong> <i>Blablablablablabla</i><br /><br /><strong>Profession:</strong> <i>Blablablablablabla</i><br /></em></a>

Je n'arrive pas à trouver la bonne solution. merci de votre aide
Modifié par gesualda (05 Aug 2007 - 20:21)

Bonjour gesualda,

Je ne constate pas ce que tu dis.

Peux-tu donner un lien de ton travail stp ?

Merci d'avance.

Bonjour blue,

voici le lien qui te permet de voir le problème: ici

J'ai modifié

a:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    [b]top: 25px;[/b]

en:

[b]bottom: 25px;[/b]

Ce qui a pour effet de le placer un peu plus judicieusement sur les deux navigateurs, mais je doute que ce se soit la bonne manip.

Merci pour tes conseils.

Bonjour gesualda,

Déjà, dans ton tuto de peutetreunereponse.net, il n'y a pas le même rendu sur tous les navigateurs, avec FF, c'est bon, avec IE7, l'infobulle est beaucoup plus haute et avec IE6, l'infobulle est beaucoup plus haute et la petite flèche apparaît 2 fois, l'une en dessous de l'autre.

J'ai donc pris le tuto d'Alsacréations Comment contrôler et modifier l'apparence d'une infobulle ?, en le modifiant comme chmel, dans ce post.

Le rendu est pas mal sur tous les navigateurs, avec une légère différence du positionnement de l'infobulle, entre FF et IE6-7.

Donc, voilà le code.
css :
Tu gardes :

#photo{
	width: 100%;
	margin-top: 20px;
}
#photo img{
	border: 0;
}
#photo h1{
	font-size: 2.25em;
	width: 90%;
	margin-left: 40px;
	margin-top: 30px;
	margin-bottom: 40px;
	font-style: italic;
	text-indent: 90px;
	color: #97004B;
	text-decoration: underline;
}
#photo .bloc_ph, #photo .bloc_ph_haut, #photo .bloc_ph_bas{
       width: 88%;
       height: 160px;
       margin-left: auto;
       margin-right: auto;
       margin-top:0px;
       padding-top: 10px;
       text-align: center;
       background-color: #FFF;
}
#photo .bloc_ph{
	border-left: 3px solid #FFA346;
	border-right: 3px solid #FFA346;
}
#photo .bloc_ph_haut{
	border-top: 3px solid #FFA346;
	border-left: 3px solid #FFA346;
	border-right: 3px solid #FFA346;
}
#photo .bloc_ph_bas{
	border-bottom: 3px solid #FFA346;
	border-left: 3px solid #FFA346;
	border-right: 3px solid #FFA346;
}
#photo p{
        background-color: #E7F9AA;
	border: 1px solid #FF9B37;
	height: 140px;
	width: 120px;
        float: left;
        padding-top: 10px;
        margin-left: 10px;
        /*margin: 10px; */
}  

Tu rajoutes :

a.infoPhotos {
text-decoration: none;
color: black;
}
a.infoPhotos span {
display: none;
}
a.infoPhotos:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.infoPhotos:hover span {
display: inline;
position: absolute;
margin: 3px 0 0 -6em;
background: #ffc;
border: 1px solid #bbb;
text-align: left;
color: #000;
padding: 2px;
width:220px;
height: 120px;
}

Pour la petite flèche, tu rajoutes :

a.infoPhotos:hover span span {
    /* permet de positionner une image en haut de l'infobulle lui donnant ce style particulier de bulle de BD*/
	position: absolute;
    top: -7px;  /* doit correspondre à la valeur négative de la hauteur de l'image */
    left: 15px;  /* la positionne horizontalement par rapport au début de l'infobulle */
    height: 7px;  /* correspondent à la hauteur de l'image */
    width: 11px;  /* correspondent à la largeur de l'image */
    background: transparent url('http://www.behrentoutsimplement.org/img/img_album/infobulletop00.gif');  /* permet de renseigner l'url de l'image */ /* supprime si pas d'image */
    background-repeat: no-repeat;
    margin:0;
    padding: 0;
    border: 0;
    }

Et pour le html, tu modifie comme ceci :

<p><a href="#" class="infoPhotos"><img src="http://www.behrentoutsimplement.org/img/img_album/gg_2.jpg" widht="89" height="110" alt="" title="" /><br />Jérôme Dibo<span><span><br /><strong>Nom:</strong><i>Blablablablablabla</i><br /><strong>Prénom:</strong><i>Blablablablablabla</i><br /><strong>Age:</strong><i>Blablablablablabla</i><br /><br /><strong>Profession:</strong><i>Blablablablablabla</i><br /></span></span></a></p>

Il y a sûrement moyen d'annuler la petit différence de positionnement de l'infobulle entre FF et IE6-7, mais la, j'ai pas trop le temps, si tu y arrives, dis moi comment tu as fait stp.

Bonjour blue

J'ai bien noté les modifications que tu as apporté et je t'en remercie. J'ai constaté que tu as viré la balise 'em' et remplacer par la neutre 'span', ainsi que le bug IE que j'avais oublié.

Par contre j'ai juste rectifié la fermeture de la balise 'span' contenu, car cela donnait une erreur à l'affichage du texte, et je l'ai fermé de suite après son ouverture puisque ce n'est que le contenu de l'image haut sur la boite soit:

<p><a class="infoPhotos" href="#"><img src="img/img_album/gg_2.jpg" widht="89" height="110" alt="" title="" /><br />le titre<span><span></span><strong>Nom:</strong> <i>Blablablablablabla</i><br /><strong>Prénom:</strong> <i>Blablablablablabla</i><br /><strong>Age:</strong> <i>Blablablablablabla</i><br /><br /><strong>Profession:</strong> <i>Blablablablablabla</i><br /></span></a></p>

Merci énormément pour ce coup de main et ces rectifications.

@ bientot

Pas de quoi et bravo pour la modif
Il vaut toujours mieux trouver un tuto Alsa