Supprimer contour image/lien sous FFox et Explorer

bonjour,
J'ai un menu en images/liens noires sur fond noir et quand on clique dessus FFox et Explorer délimitent les contours de l'image soit en pointillé blanc soit en contour bleu. Ce qui n'est pas le cas avec safari ou netscape.
j'ai tout essayé : le body a un fond noir, la div aussi, border est à 0, lien noir, jamais souligné, etc... et ça le fait aussi si j'utilise du texte blanc : le contour apparaît autour du mot !
Je me rends compte que c le cas sur pas mal de sites. Ca passe sous ffox en faisant une map sur l'image, mais c pas très top...

Qui sait comment on pourrait éviter ça ?
merci

Bonjour,

S'il s'agit de la mise en valeur par défaut des liens lors du clic ou de la navigation au clavier (avec TAB), il me semble qu'il s'agit d'un style CSS par défaut dans Firefox, style qui utilise la propriété outline.

Tu peux tester outline: none ou outline: 0 sur tes liens, voire outline: none !important et outline: 0 !important.

Et sinon : est-ce que tu as ce genre de règle CSS dans ta feuille de style ?

a img {border: none;}

Il faut peut-être commencer par ça.

oui j'avais vu dans les FAQ qu'on pouvait mettre a img {border: none;} mais ça ne marche pas (ou alors je sais pas le mettre correctement...)
C'est plutôt à mon avis cette mise en valeur par défaut des navigateurs pour qu'on voie le contour des liens puisqu'il le met même autour du texte. A quel endroit on met outline si j'ai un feuille de style extérieure ?
Ca devient a:link {outline: none;} ?

Bonjour,

pourquoi vouloir absolument l'éviter?

C'est un des seuls points de repére que l'on a quand on navigue au clavier.

knarf a écrit :
Bonjour,

pourquoi vouloir absolument l'éviter?

C'est un des seuls points de repére que l'on a quand on navigue au clavier.

+1

je sais pas comment on navigue au clavier ; on clique comment ?
sinon, c à cause de mon "commanditaire", mais il est trop tatillon je trouve... : ça le gêne visuellement d'avoir ces contours sur un site tout noir...

Pour naviguer au clavier il suffit d'utiliser la touche tabulation.

Cela permet d'avoir ce que l'on apelle le focus sur tous les éléments d'une page web le permettant, de mémoire, liens et éléments de formulaires (à compléter il doit en manquer)

Essaye de faire un petit test avec ton commanditaire (si possible) tu débranche la souris de l'ordinateur (outline invisible) tu lui demande d'utiliser la tabulation 4 ou 5 fois et après tu lui demande d'accéder à une page bien particulière.

Certaines personnes utilisent ce type de navigation (je ne ferai pas une liste car il existe tellement de raison que ce serait trop long), si elles ne peuvent pas se repérer dans le site il y a de fortes chances pour que celles-ci ne naviguent pas dessus et ne reviennent jamais.

Si le but de ce site est d'exclure ou de rendre plus que difficile la navigation de certaines catégories d'internautes et donc, en fonction du site la perte de clients potentiels c'est la bonne manière de procéder.

Demande lui ce qui le gêne le plus, d'avoir visuellement ces contours ou de perdre presque automatiquement des visiteurs.

Une éventuelle solution de retranchement (si vraiment c'est pas jouable avec le client), la déclaration d'un focus dans la css (non pris en compte par IE6) permettant d'habiller le lien en question dans des tons qui respecteraient la charte.

EDIT:

Florent a écrit :
S'il s'agit de la mise en valeur par défaut des liens lors du clic ou de la navigation au clavier (avec TAB),

J'avais pas vu
Modifié par knarf (28 May 2007 - 05:54)

knarf a écrit :
J'avais pas vu

duplo non plus (puisqu'il dit plus loin : je ne sais pas comment on navigue au clavier).

Sinon, tout à fait d'accord sur le fait de ne pas supprimer ce style par défaut, important pour l'accessibilité du site.

Même s'il est effectivement possible de le renforcer en dupliquant pour la navigation au clavier les styles utilisés pour le survol des liens (pseudo-classe :hover). Par exemple :

a {color: blue;}
a:hover, a:focus, a:active {color: red;}

c pas mal, cette discussion nous amène sur les pb d'accessibilité.
Je vais laisser tomber ce problème de contours : c pour un type qui fait du design d'intérieur et il voulait tout noir et blanc pour l'interface (comme son logo) avec s apolice et le plus sobre possible...
merci à tous
S

Bien bien cette propriété outline:0;

Merci Florent! Je l'ai utilisée pour une mini galerie photo avec rollover, ca faisait pas beau avec "cette mise en valeur par défaut des liens".

a écrit :
Bonjour,

S'il s'agit de la mise en valeur par défaut des liens lors du clic ou de la navigation au clavier (avec TAB), il me semble qu'il s'agit d'un style CSS par défaut dans Firefox, style qui utilise la propriété outline.

Tu peux tester outline: none ou outline: 0 sur tes liens, voire outline: none !important et outline: 0 !important.

Merci BEAUCOUP pour ce tuyau !