Bogue dans Opera

Bonjour à tous, je débute ici.
J'ai lu avec attention et intérêt le livre "CSS 2 - Pratique du design web", de Raphaël Goetter, et j'ai expérimenté les indications du chaptire 11, section "Des infobulles personnalisées", car je voulais inclure dans les textes d'un de mes sites l'équivalent des notes de bas de page, sous forme de notes apparaissant uniquement au survol de certains mots par la souris.
Tout a bien fonctionné sous IE6 et sous Firefox 2, mais pas sous Opera 9, qui affiche un texte tronqué, en hauteur comme en largeur.
Voici les sources :

HTML
<p>Survolez le mot <a class="note" href="#">"Alsace"<span>Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française Région française </span></a> ou rien.</p>

CSS
<style type="text/css">
a.note {position: relative; text-decoration: none; color: black; border-bottom: 1px red dotted}
a.note span {display: none}
a.note:hover {background: none /* Indispensable pour IE */; z-index: 500}
a.note:hover span {display: inline; position: absolute; z-index: 500; width: 39em; top: 2em; left: 0px; background: green; text-align: justify; text-indent: 2em; color: white; padding: 0.2em}
</style>

Résultat sous IE6 :



Résultat sous Firefox 2 :


Résultat (désastreux) sous Opera 9 :



NB : j'ai tenté un remplacement de "display: inline" par "display: block", sans résultat.
Voilà. Si quelqu'un peut me dire où est mon erreur, je lui en saurai gré. Merci !
Modifié par J_P_M (25 Dec 2006 - 14:44)

Bonjour et bienvenue sur Alsacréations .

Pour plus de lisibilité de ton message merci de présenter lisiblement ton code comme demandé dans les règles du forum.

Bonsoir J_P_M,

En remplaçant la propriété "top" par "margin-top", on obtient le bon résultat avec Opera.
Il y a certainement d'autres manières d'éviter le bug

Merci, Alan, excellent tuyau.
Mais il faut aussi remplacer la propriété "left" par "margin-left", sinon la correction est imparfaite et la boîte reste tronquée. On le vérifie bien en ajoutant le mot "FIN" à la fin du texte que ladite boîte doit afficher.
Étrange : Opera passe pour respectueux des standards, et je n'ai trouvé aucune mention de ce genre de bogue dans les (nombreux) livres que j'ai lus. En outre, on évite le bogue en employant des propriétés, "margin-top" et "margin-left", qui ne sont pas censées s'appliquer avec "position: absolute".
Si quelqu'un connaît d'autres solutions, je suis preneur.
Encore merci !

De toute façon display:none est déconseillé pour raison d'accessibilité (cf: « Remplacement d'images : halte au display none ! »).

Il pourrait être intéressant d'utiliser la propriété clip. On choissirait la valeur 0 pour tout rogner et la valeur auto sur a:hover span pour ne plus rien rogner.

Vu pour "clip" et "display: none".
C'est pertinent, cependant j'ai une objection : le "display: none" que j'ai utilisé ne sert pas à cacher une image, mais un texte qui sert de note (comme les notes de bas de page, mais... pas en bas de la page !), texte qui apparaît seulement quand la souris survole le mot à commenter.
Je suppose par conséquent que, lors de son apparition, ce texte est lu... et entendu par les mal-voyants.
S'il n'était pas masqué par "display: none", il risquerait d'être lu de façon intempestive, dans le flux, juste après le mot qui est censé le faire apparaître, et donc brouillerait la phrase. Mais là, je ne suis certain de rien, faute d'expérience.

J_P_M a écrit :
texte qui apparaît seulement quand la souris survole le mot à commenter.
Je suppose par conséquent que, lors de son apparition, ce texte est lu... et entendu par les mal-voyants.

Les mal-voyants utilisent en général le clavier et la synthèse vocale pour naviguer sur une page web, donc ton contenu est incessible.

De toute façon, l'accessibilité n'est pas une priorité, puisque cela ne fonctionne pas, en définitive, même pour les personnes ayant une vue normale. J'ai fait un essai, qu'on peut voir ici :

http://www.jp-m.eu/rac/_sonnet.htm

... en cliquant sur le mot "chouette" souligné en pointillés rouges. Or le résultat est mauvais dans tous les navigateurs :
- IE6 est celui qui réagit le mieux, mais il ne tient pas compte de la marge gauche et affiche la note à l'extrême gauche de l'écran ;
- Firefox 2, catastrophique, fait clignoter la note à toute vitesse, et ne tient compte ni des marges ni de la couleur du texte ;
- Opera affiche la note n'importe où, ne tient compte ni des marges ni de la couleur, efface une ligne... et oublie d'effacer la note quand la souris se retire.

Je commence à croire que le problème est insoluble, sauf à utiliser du Javascript, ce que justement je ne veux pas faire, pour les raisons bien connues. Renoncer ? C'est râlant !
Modifié par J_P_M (27 Dec 2006 - 12:48)

Ben justement, je me demande si une solution javascript (dans le genre de celle utilisées pour les menus déroulants) ne conviendrait pas.

Je l'utilisais. J'y ai renoncé, d'abord parce que des tas de gens désactivent Javascript ; ensuite, parce que, là encore, certains navigateurs affichaient une fenêtre tronquée.
Triste à dire, mais seul Internet Explorer s'en tirait bien. Les deux autres sabotaient l'affichage.
Donc, retour à la case départ...
Soit dit en passant, les menus déroulants peuvent très bien se fabriquer sans Javascript, et rien qu'en CSS. Voir par exemple "CSS", par Eric Meyer, chapitre 6.

Bon. En tout cas ça fonctionne très bien dans Firefox 2.0.0.1 (windows) : je n'ai aucun problème de clignotement, couleurs ou quoi que ce soit...
Modifié par Patidou (27 Dec 2006 - 12:54)

Surprenant ! Je viens encore de vérifier, sous le même Firefox 2.0.0.1 : la note sur fond vert est rejetée à l'extrême droite du moniteur, débordant de l'écran donc à moitié affichée, toutes les lignes du texte normal et à la même hauteur clignotent à toute vitesse, et le bas de la page également (au niveau de la barre de défilement horizontal). Le texte de la note, qui devrait être blanc, est rouge.
Sur IE6, le padding est respecté, et le texte est blanc, mais souligné en noir. Sur Opera, le texte est rouge et justifié à droite. N'importe quoi...
Tu peux lire TOUTE la note, ou bien elle est à cheval sur la limite droite de l'écran ?
Conflit avec le fichier CSS externe ? Pourtant, ça ne devrait pas arriver, les styles CSS internes ayant priorité dans ce cas.

Aïe, oui j'avais mal vu : ça déborde un peu et le texte n'est pas blanc. Désolé.