Infobulle personnalisées

J ai écrit.repris le css suivant :

/*infobulles personalisées*/

a.info {position:relative;display:inline;text-decoration:none;color:black;}
a.info span {position:absolute;display:none;width:200px;}
a.info img {border:0 none transparent;}
a.info:hover{background:none;z-index:500}
a.info:hover span {display:inline;position:absolute;z-index:500;top:50px;left:20px;background:#e7e4e4;color:#009900;padding:0.5em;}

et en html ça donne :
<a class="info" href="http://www.canoekayakmagazine.com/index2.html" target="_blank" > <span>Canoë
Kayak Magazine: beaucoup d'infos et webistiquement réussi.</span><IMG src="../icones/canoekayakmag.gif" ></a>

le texte dans le span apparait dans un rectangle paramétré et positionné dans le a.info:hover span du css au survol de l' image....
Le probléme : firefox et ie ne positionne pas pareil bien sur !
Firefox met le texte par defaut dans un rectangle de la même largeur que celle de l' image et positionne a partir du bas de l' image .
Ie met le texte dans un rectangle d une seule ligne de largeur égale au texte et positionne à partir du haut de l' image (sur l' image en fait) .
pour normaliser la largeur c' est possible en la spécifiant dans a.info span (bien que je préfére le comportement adaptatif de firefox) .
Mais pour le positionnement je ne sais pas comment faire ...
Merci pour votre aide .

J oubliais le lien vers mon site :
http://yvesperso.ouvaton.org/pagewebmestre/webmestretexte.htm

Bonjour Yves,

Tu peux enlever la position absolute et la dimension de "a.info span" :

a.info span {display:none;}

Et tu peux par contre spécifier des dimensions au span survolé :

a.info:hover span {
display:inline;
position:absolute;
z-index:500;
top:50px;
left:20px;
background:#e7e4e4;
color:#009900;
padding:0.5em;
width: Xpx;
height:Xpx;
}

Tu peux rajouter des bordures également (border:4px double gray; par exemple), bref, ce que tu veux.
Certes le rendu n'est pas exactement le même, mais cela y ressemble

Après, tu peux éventuellement te diriger vers le javascript dont c'est plus le rôle que le css

Cdt,
Sylvain

d accord pour le premier point .
PAr contre pour le reste , je trouve un autre bug ie/firefox si je précise la hauteur : firefox assure justement la hauteur indiquée dans le css, ie s adapte au texte .....
De toute façon mon probléme c' est le positionnement , pas le look du rectangle ...
IE affiche à partir du haut de l' image et firefox a partir du bas de l' image ce quyi fait un décalage énorme quand l' image est haute entre les 2 navigateurs.

bonjour

pour a.info met display:block au lieu de inline...
alors même position pour IE6, IE7 et firefox


oups, il faut aussi spécifier la largeur : width: 150px /*largeur de l'image*/
et comme tu voulais aligner plusieurs de ces images (d'après ta page), il faudra les mettre en float:left

bigre ça se complique... tout ça pour avoir le même positionnement...

ou alors un commentaire conditionnel où tu spécifies un top différent pour firefox ?
Modifié par verdan (23 Feb 2008 - 18:30)

Yves, Bonjour également...

Tu as raison la cosmétique, c'est ton affaire.
Il y a effectivement des différences d'interprétation entre les navigateurs (taille du texte par défaut, marge, padding, etc...) il faut faire avec et/ou tenter, autant que faire se peut, de limiter/masquer ces différences.
Spécifier pourquoi pas, comme le préconise verdan, un positionnement différent suivant le navigateur...
Il existe peut-être d'autre moyen de régler ce petit soucis, là de suite, je ne vois pas.

Passer par un langage initialement prévu pour s'occuper du comportement est sans doute aussi une bonne idée (comme le fait tout à fait correctement la partie "Lastfm", calcul est affichage fait par rapport à la position du curseur a priori)

Bonne continuation.
Cdt,
Sylvain

je me suis toujours refuser à faire des tops par navigateurs ....
j' ai adopté la méthode avec display:block car elle met ie et firefox sur la même interprétation .
Aprés il y a a gérer un peu de float:left sur ces blocs mais rien de sorcier.
Enfin gérer le positionnement de la bulle avec des propriétés top adaptés à la hauteur de l' image .... on peut éventuellement aussi prendre en compte les largeurs et .....arriver au comportement par défaut de firefox comme d' habitude trés élégant dans son rendu .
Merci à tous pour vos réactions rapides .