small white dots under links

[Geoffrey james]

Hey all,

How can i get rid of small white dots under my horizontal navigation.

thanks in advance.

Geoff

[swa66]

Perhaps a small code sample that creates this (please try to keep it as small as possible so that it still exhibits your problem.)

[encyclo]

I assume you're talking about the dots added when the link has focus? If so, this is an accessibility feature in the browser to help identify the cursor focus when navigating the site via the keyboard (tabbing through the links).

There is a convoluted Javascript method to remove the dots, but it works by removing focus from the element - thus wrecking accessibility for a dubious and minor improvement in visual appearance. The answer is, therefore, no, don't do it - you would be throwing away one of the big advantages of using CSS in the first place.

[Robin_reala]

There’s also a CSS way of doing it (in Firefox and Opera at least) that doesn’t have to have the same accessibility problems of the convoluted Javascript method Encyclo mentions. You’ve got to be certain that you are setting some difference though, not just getting rid of the normal indicator though. If you do that then your entire site becomes unusable to keyboard users.

Anyway, if you look in Firefox’s html.css you’ll find this rule for focused elements:

outline: 1px dotted invert;

We can set our focused elements to use a different style instead:

#myelement:focus {
outline: 0;
background-color: red;
}

Or something similar.

[edited by: Robin_reala at 11:28 pm (utc) on Nov. 19, 2006]

[swa66]

Note the OP talked about white dots under his menu, AFAIK the outline is drawn around an element and always on top.

Interesting is that outlines take up no space.

outline is defined here:
[w3.org...]