Tuto sur les infobulles : parlons d'Opera

Bonjour,

Pourriez-vous ajouter une source à votre tuto sur les infobulles, à savoir
http://www.alsacreations.com/astuce/lire/1.html
Il sagit d'un correctif pour le navigateur Opera qui a du mal (encore aujourd'hui) avec les positions en absolue
http://tint.de/web-design/css-tooltips-for-everybody

Je signale que je ne suis pas l'auteur de cet article MAIS qu'il m'a permis de corriger le bug que vous pouvez apercevoir à cette adresse (bug avec opera)
cf http://japsenne.free.fr/alsa

De qui sagit-il : de l'ajout de ce code spécifiquement pour opera...

a.info:hover span {
  left: inherit;
  top: inherit;
  margin-left: xxxpx;
  margin-top: yyypx;
}

Après, on regrettera tous que seul Internet Explorer ait conscience de ses faiblesses : en effet, je ne connais pas de Hack convenable pour Opera -> passage par javascript

David
Modifié par djaps (21 Feb 2010 - 12:21)

Si vous n'avez pas Opera, je vous envoie en image le bug constaté


http://acid3.acidtests.org/
David

Bonjour,

Houlàlààààà  ! Très intéressant ton petit message d’alerte et décourageant en même temps.
J’ai fait l’autre jour un exercice en 6 étapes ayant trait aux info-bulles sur une image (pour imiter area-shape).

Ça fonctionne bien sur divers navigateurs à ma disposition et je n’avais même pas vérifié sur Opera me disant que c’était peine perdue puisqu’il réussi parfaitement l’acid3 (voir  : comparaison des performances des navigateurs à l’acid3).
Pour IE, j’ai pas encore vérifié car il faut que je prenne le train pour galèrer en ville dans un cyber-café… (les a :hover en capture d’écran sur browsershot, c’est pas terrible )

Pour en revenir à Opera… mon exercice ne fonctionne pas dès la première étape, le pointeur normal « pointer » pour les liens n’apparaît même pas… pour cette étape et les suivantes, c’est comme si j’avais des pages vides de code… il ne se passe RIEN !

Mon code est loin de ressembler au tien mais j’ai tout de même essayé le correctif que tu indiques en divers endroits sans résultat. Je crois qu’il faut que je repense complètement la structure… Mais le code une fois bon pour Opera, le sera-t’il toujours pour les autres navigateurs ? Généralement, la réponse est « non ».

lien vers mon exercice pour constater la déconfiture

Je savais qu'une bande dessinée attirerait plus de monde qu'un roman

Une précision cependant,

a écrit :
(les a :hover en capture d’écran sur browsershot, c’est pas terrible lol )

L'image est bien une capture d'écran et non pas un montage... malheureusement

De plus, je suis en accord avec toi qu'il faut apporter un correctif à opera et spécifiquement à opera puisque le correctif avec "inherit" entraine chez les autres butineurs tout et n'importe quoi

Merci pour ta réponse
David

PS: le lien vers acid3 est un jocke (le test, pas le résultat qui t'a fait penser que ...)

Vue d'Opera, sans utiliser cette histoire d'inherit…

/*  en remplaçant pour la span d'info */
position: absolute; top: --px; left: --px;
/* par */
position: absolute; margin-top: --px; margin-left: --px

Ça passe bien sur Firefox mais sur Safari et Omniweb (webkit) la première infobulle se place à droite… bizarre car c'est la même classe pour les 2 infobulles. Enfin, le résultat me soulage, mon histoire de plusieurs infobulles sur une image n'est peut-être pas perdue. Autre détail : Le padding top du paragraphe crée un bug pour l'infobulle du haut, il vaudra mieux prévoir une marge. (c'est pour ça que je n'en ai pas mis )

J'ai suivi ton idée (plus d'inherit)

J'ai remarqué que j'obtenais toujours ( même avec inherit ! ) un reste de border-bottom lorsque l'infobulle s'affiche entièrement dans le balise mère -> meme mon histoire d'inherit ne règle pas tout

c'est peut-être cela ton pb de padding-top ?

De plus, après différents essais, j'ai pu m'apercevoir que chez moi ( opera 10.10rev4742 linux ), c'est la définition du positionnement vertical qui pose problème (le left: --px;)
- top et margin-left : OK ( http://japsenne.free.fr/alsa/index4.html )
- margin-top et left : Problème ( http://japsenne.free.fr/alsa/index3.html )

Donc, pour ton pb, essais

position: absolute; top: --px; margin-left: --px

Au plaisir
David Modifié par djaps (22 Feb 2010 - 11:29)[/edit]