IE6 dotted outline on links

[keyplyr]

Is it possible to get rid of that dotted outline that IE6 leaves on a CSS link after being clicked? Not an issue when leaving, but not a beautiful thing when staying on the same page.

[pageoneresults]

Not without disabling functionality for the end user. I've done it with one site using this in the external .js file...

<!--

function unblur() {
this.blur();
}

function blurLinks() {
if (!document.getElementById) return;
theLinks = document.getElementsByTagName("a");
for(i=0; i<theLinks.length; i++) {
theLinks[i].onfocus = unblur;
}
}

// -->

[msr986]

Same thing but different:

function Blur(blurLink) {
if (blurLink.blur) {
blurLink.blur()
}

Then I use onClick="Blur(this)" in the links I want to cleanup.

[keyplyr]

Am I correct in assuming that, while removing the dots, both scripts would interfere with?

<a href="javascript:void(0);" onclick="document.getElementById('answer2').style.display = 'block'">

Thanks

[pageoneresults]

Two different solutions. The first one is a global fix and the second is for specific links. I had to remove the dotted line on all links and it looks like we will be taking that feature out shortly. Too many complaints from people not being able to tab through the links.

<edit> Can't answer that last question k, I'm not a javascript person. I just know how to cut and paste and make it work following the instructions. ;)

[keyplyr]

Thanks pageoneresults. The global version did not work. I'm guessing it's because of "document.getElementById" being used in my inline JS.

The script msr986 posted of course won't do either since I can have only 1 "onclick" in the tag.

I was hoping there was some sort of MS META tag - LOL

Thanks again.

[rewboss]

I think there is a meta tag or even a CSS control that will do this, but I wouldn't really recommend it. The reason for this behaviour is accessibility for people who don't, or can't, use mice.

You can use the keyboard to tab through all the links, form fields etc on a page. The dotted outline shows you which link/field/whatever currently has keyboard focus. For people who like to or must use the keyboard, this is crucial for navigation.

It is also, incidentally, bad practice to remove keyboard focus from anything without transferring it somewhere else. It makes using the keyboard to navigate practically impossible.

[DrOliver]

That's the CSS-version:

a:focus{outline:none;}

[joshie76]

There's an attribute you can use:

<a hidefocus="true" href="..">link</a>

Rewboss is correct though - this is an accessibility feature and should be removed only if it's really necessary.

As far as I could see the "a:focus{outline:none;}" had no effect.

[moonbiter]

AFAIK, there is no browser that supports the outline property of CSS 2.

[Ollyoat]

Iv'e been using :

<a href="" onfocus='this.blur()'>

But I have a question regarding the short dash. I am currently trying to re-write my site in xhtml and have run upon a compatibility snag. IE6 does not support &#151; so I used either &ndash or &minus which earlier Netscape (4.08) doesn't support. Little dashes off the keyboard just do not look right with maths so I want the short dash.

What in god's name is compatible with IE6 and Netscape ???

[msr986]

keyplyr,

You can call as many JavaScript functions as you want from one "onClick". Just do the following:

<a href="javascript:void(0);" onclick="Blur(this); document.getElementById('answer2').style.display = 'block'">

-Marty