Discussion :

[bitbis]

Bonjour,
j'ai une charte graphique qui s'affiche en plein navigateur sans scrollbar avec donc des dimensionnements au pixel prés.
Mozilla, lors du clic sur un lien (balise a) encadre le lien avec des pointillés. Cela à pour effet d'augmenter la taille du bloc du lien de 2 pixels en largeur et de 2 pixels en hauteur, ce qui est génant dans mon cas.
En effet, la taille de la page web devenant supérieure à celle du navigateur, les scrollbar sont activées, cachant au passage une partie de la page.

Heureusement, cet effet, n'est la plupart du temps présent que peu de temps (entre le clic de l'utilisateur et le chargement de la page suivante.

Cela reste quand même génant.
Y a t'il un moyen (css ou javascript) de désactiver ce mécanisme (autre que de remplacer les balises a par des balises div + onclick) ?

Pour mieux comprendre, voyez de vous même sur l'une des pages de mon site : http://www.felicienfrancois.fr/housemusic.html
et cliquez sur l'un des liens.

[MasterOfChakhaL]

Salut,

Les pointillés que tu observes sont un outline que mozilla ajoute sur un élément actif.

Le truc bizarre, c'est que normalement, ca n'est pas sensé changé la mise en page (c'est d'ailleurs la différence avec la propriété border...)

Tu peux ajouter outline:0; pour supprimer cette décoration.

Par contre, je te suggère d'appliquer les styles que tu définis à la pseudo-classe :hover sur la pseudo-classe :active. Les rares utilisateurs qui naviguent à l'aide de leur clavier t'en seront reconnaissant, car sinon, il n'y a aucun moyen pour eux de savoir quel lien ils ont sélectionné

[bitbis]

Merci pour ta réponse, ca fonctionne correctement.

Par contre, j'ai essayé d'appliquer mes styles :hover à :active.
J'ai testé sous mozilla en navigant au clavier (avec tab) mais je n'ai pas constaté de différence: Les liens ne s'alumment pas lors de leur sélection.
voici un extrait de code modifié:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
a.cuisine:hover {
background-color:#660000;
color:#ffffff;
}
a.cuisine:active {
background-color:#660000;
color:#ffffff;
}

Pour ce qui est des indicateurs de selection il y a quand même la barre d'état qui indique l'url du lien actuellement selectionné. Mes liens étant de vrais liens (pas javascript) et avec des url assez explicite, cela ne pose pas trop de problème pour la navigation au clavier.

[MasterOfChakhaL]

Salut,

Je viens de tester et j'ai été surpris de constater que ca ne marchait pas...

En fait, internet explorer réagit au a:active, tandis que firefox réagit au a:focus. J'avais zappé cette différence...
Donc si tu veux implémenter la navigation au clavier, il va falloir ajouter le focus.

Désolé de t'avoir donné une demi réponse