Opera 8 et 9 et comportement d'affichage / masquage d'éléments

Bonjour à tous,

On m'a fait remarquer un comportement très bizarre sur Opera 8 et 9 à propos de l'infobulle personnalisée de la FAQ : sur Opera9, l'infobulle ne s'efface pas quand on quitte le lien. Du coup, les autres infobulles s'affichent par dessus

J'ai remarqué ce même comportement avec tous les scripts de "calques" qui s'affichent et se masquent.

En fait je crois que c'est l'affichage qui ne se rafraichit pas : quand tu passes une autre fenêtre par-dessus le navigateur, puis que tu enlèves cette autre fenêtre, l'infobulle est alors bien masquée...

Mais je n'arrive pas à trouver d'infos là dessus

Capture sur Opera 8, lors du survol de "Ginette" :


Capture sur Opera 8 : on quitte Ginette pour aller sur Toto :


Sur Opera 9, le problème de :hover est réglé, mais il est remplacé par un autre problème : la taille de l'infobulle est restreinte, une partie du texte est tronqué !

Capture sur Opera 9 : une partie de l'infobulle est tronquée !


Quelqu'un a-t-il des pistes à propos de ces comportements ?
Modifié par Raphael (28 Dec 2006 - 12:25)

Bonsoir Raphael,

Concernant Opera 8, il semblerait que le problème soit lié au z-index appliqué à a.info:hover. En l'enlevant ou bien en l'appliquant uniquement à a:info, tout semble bien se passer.

Pour la largeur restreinte (en fonction de la longueur du conteneur), j'obtiens le même résultat qu'avec Firefox (du moins à partir de la version 1.5. Avant, avec les versions 1.0x, Firefox donnait un résultat semblable à Opera 8 ou Internet Explorer).

Pour le texte rogné, cela ne se produit pas si l'on ne spécifie pas de "top" ou "left" ceci dit je n'ai pas d'explication.
Modifié par Alan (28 Dec 2006 - 20:43)

Alan a écrit :
Pour la largeur restreinte (en fonction de la longueur du conteneur), j'obtiens le même résultat qu'avec Firefox (du moins à partir de la version 1.5.

Merci pour ton retour.
De mon côté, le comportement n'est pas identique sur FF1.5 : la boite est effectivement réduite, mais le contenu n'est pas tronqué : tout s'affiche.

Il semble que ce soit moi qui ait soulevé le problème, dont parle Raphaël, à propos d'une question plus générale sur le comportement de l'infobulle avec Opera.
On m'a donné une indication sur le "crop" des textes de l'infobulle : comme elle est positionnée, il faut utiliser "margin-top" et "margin-left" à la place de "top" et de "left". Ce n'est pas orthodoxe, mais cela fonctionne.
Sur le "z-index", il faudrait expérimenter...
Mais il existe un autre comportement bizarre de l'infobulle avec Opera : il l'affiche d'une façon bizarre, sur deux lignes au lieu d'une, la première
commençant (bien inutilement) par "Titre :", et la seconde mentionnant l'URL de la page en cours.
Quelqu'un connaît-il un moyen, en CSS ou autrement, de faire en sorte qu'Opera affiche les infobulles "normalement", comme les autres navigateurs, c'est-à-dire sur une seule ligne, et avec seulement le texte mentionné dans l'attribut "title" ?
Merci !

bonjour,
pour le probleme de l'info bulle qui ne disparait pas , il s'agit la d'un vieux bug d'opera, qui n'effectue qu'un rafraichissement partielle de l'affichage , pour eviter cela il faut passer par un reload virtuel de la page.

J'ai deja evoqué ce probleme a propos de pied de page positionné en absolue qui ne suivaient pas au redimensionnement de la fenetre en hauteur.

Le coté "curatif" de ce probleme se trouve sur le hover de body .

comme ceci par exemple :

body:hover:after {
content:'';
}

Les probleme lié a un defaut de rafraichissement d'affichage de la page seront alors en grande partie reduits dans Opera .

ensuite pour le span qui reste trop petit (largeur du plus long mot), un display:table; au lieu d'un inline suffit a rendre l'affichage sur une ligne dans opera 9.
Opera 9 semble prendre comme reference la largeur du parent positionné en relatif, comme espace d'affichage, en donnant un comportement de "tableau" a l'affichage pour le span , il redevient extensible en largeur .
<edit>ARF firefoxe a le même defaut et en plus un sautillement desagreable , donc : re edit avec une autre approche !

la page test :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 

xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>XHTML 1.0 Strict</title><style 

type='text/css'>

a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}

a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display:inline;
white-space:pre;/* affichage une ou plusieurs lignes opera/firefoxe/IE/ ... */
position: absolute;
top: 2em;
left: 1em;
background: orange;
text-align: center;
color: white;
padding: 2px;
}

/* bug opera */
body:hover:after {
content:'';
}


</style><script type='text/javascript'></script></head><body><p>Survolez le mot <a class="info" href="#">"Toto"<span>un 

petit garçon sympathique</span></a> ou survolez le mot <a class="info" href="#">"Ginette"<span>une vilaine 
madame !</span></a> pour obtenir des explications.</p>
<!-- espace entre les mots deplacé pour eviter un sautillement dans firefoxe -->
</body></html>

</>
Modifié par gcyrillus (01 Jan 2007 - 23:23)