How to remove dotted border around active hyperlinks in IE8 with CSS

Question

Active hyperlink texts are highlighted with dotted border. When using effects on such hyperlinks (fadeIn/fadeOut) it produces strange effects. How do I disable/remove the dotted border?

Answer 1

Try this CSS:

a:active, a:selected, a:visited {      border: none;     outline: none; } 

Note that this has to be after any a:hover rules. Thanks to PEra in the comments for suggesting using the a:selected selector as well.

NOTE

The above does not work in IE 9. Removing a:selected causes it to work in IE9.

Answer 2

Typical and safe way to do it is this:

a:active, a:focus {    outline:  none; /* non-IE */    ie-dummy: expression(this.hideFocus=true); /* IE6-7 */ } 

Since expresssion() has been gutted in IE8, you may need a script:

if (document.documentElement.attachEvent)     document.documentElement.attachEvent('onmousedown',function(){          event.srcElement.hideFocus=true     }); 

If you're going to remove the default focus outline, you must define your own distinct style for :focus, otherwise keyboard users will have a hard time using your site.