Erreur dans la FAQ

Bonjour,
J'ai constaté plusieurs incompatibiltés (sous Mozilla Firefox 5.0) dans votre css pour la question suivante "Comment contrôler et modifier l'apparence d'une infobulle ?".

Point 1
Lorsque le texte entre guillemet est survollé, un décalage de un espace est appliqué au texte qui suit et ce à cause de l'espace laissé entre le texte et la balise <span> qui le succède. Pour solutionner ce problème, il suffit de supprimer cet espace entre le texte et la balise <span> et de le remettre après la balise </a>, comme ceci :

AVANT:

<a class="info" href="#">"Toto" <span>un petit garçon sympathique</span></a>ou survolez le mot ..

CORRECTION:

<a class="info" href="#">"Toto"<span>un petit garçon sympathique</span></a> ou survolez le mot ..

Point 2
La taille de l'info-bulle est déterminée par la longueur du plus long mot, ce qui n'est pas très esthétique. Pour corriger ceci il suffit d'attribuer la valeur "nowrap" à la propriété "white-space" :

AVANT:

a.info:hover span { .. }

CORRECTION:

a.info:hover span { white-space: nowrap; .. }

Point 3
Le dernier point n'est pas un problème, plutôt un soucis de logique. Je pense que pour ne pas déstabiliser le visiteur il serait judicieux de modifier le curseur au survol du texte en "help", ainsi, il ne risque pas de confondre "texte renseigné" et lien.

AVANT:

a.info:hover { .. }

CORRECTION:

a.info:hover { cursor: help; .. }

Voila, voila, en espérant avoir été utile.
Modifié par ShadowBlade (22 Mar 2006 - 15:50)

Bonjour,

Merci pour les corrections que tu tente d'apporter à la FAQ.

Point 1
Cependant, pour le point 1, je ne suis pas totalement d'accord. En effet, la présence de l'espace avant le <span> cause un décalage sous Firefox, mais au lieu de mettre l'espace après la balise </a> comme tu le suggère, j'aurais plutôt tendance à le mettre après la balise ouvrante <span>, comme ceci :

<a class="info" href="#">"Toto"<span> un petit garçon sympathique</span></a>

Le décalage disparaît et ca conserve une certaine logique lors de la lecture de la phrase, sans styles CSS.

Point 2
Pour ce point, je ne suis pas d'accord du tout. En mettant nowrap, si la taille de la fenêtre est plus réduite, ou si le texte avec infobulle se trouve près du côté droit de la fenêtre, il est impossible de lire l'infobulle qui dépasse la zone visible. Fais le test avec une infobulle assez longue et réduis la taille de la fenêtre, et passe la souris sur le mot. Il faudrait trouver une solution pour définir une largeur intéressante à l'infobulle, parce qu'à l'heure actuelle, il est vrai que esthétiquement parlant, ce n'est pas extra.

Point 3
Tout à fait d'accord pour changer le curseur pour le help. Bonne idée.

Bonne journée.
Modifié par Tony Monast (20 Mar 2006 - 14:59)

Encore une chose

Lorsque le visiteur clique sur lien qui affiche l'info bulle, il est renvoyé automatiquement - par le navigateur - au début de la page, ce qui est en soi, assez désagréable.

Pour remédier à cette situation, il serait astucieux de faire de la balise <a> une ancre et de faire pointer le herf vers cette ancre comme ceci :

<a class="info" href="#toto" id ="toto">"Toto"<span>un petit garçon sympathique</span></a>

Après ça j'arrête, promis