FireFox displays an ugly dotted border around links (all linked elements in fact):
You can easily prevent FireFox from displaying this border by adding the following CSS style sheet, or within the <style> tags on your page:
a:active { outline: none; } a:focus { -moz-outline-style: none; }
This should not prevent your CSS from validating according to W3C’s standards.
August 14, 2008
Quote
[…] 14, 2008 Didn’t know about this, but will surely use it! Removing the dotted borders around links in firefox. Posted by cccmien Filed in Web […]
September 14, 2008
Quote
The dotted borders are only around links the user has clicked to inform the user that click has made on that links. Click anywhere else and it will go away.
Imagine you have some fancy ajax stuff but the data isn’t getting down quick enough, this allows the user to know that he/she needs to just wait. Surely by removing this is breaking usability on your own sites.
September 14, 2008
Quote
I must disagree. Very few browsers use this method to indicate clicked links. Usually, AJAX applications display progress messages/icons whilst a request is being sent. Personally, I feel that this provides much better feedback to the user.
January 16, 2009
Quote
interesting worth a try
February 8, 2009
Quote
@Homar
Most either change the colour or use a dotted border. As more webdevs are breaking the colour approach (fair enough in this modern age, but note that I strip out that CSS in a text based browser) mozilla in their wisdom moved to dotted borders, and I can think of several browsers that have followed suit (you only ever seen IE, chrome, safari and firefox?).
The point is you should not be constantly forcing breakages in how the user expects the browser to behave. I want my browser to behave as I and Mozilla designed and configured it to, not different on every site.
February 27, 2009
Quote
sometimes it has less to do with what we want and more to do with what our client wants. our clients may know better than us what their visitors want to see. thanx for code.
April 26, 2009
Quote
I couldn’t find a link on my site to test it
However I do have the border around my flash menu, and thought it would remove it !! but it didn’t.. thanks though.
May 17, 2009
Quote
Thanks for the tip!
August 17, 2009
Quote
Um, the dotted border is not for “indicating clicked links”. It just happens that the link gains focus when you click it.
The dotted border is used for indicating the currently focused link when using keyboard for navigation (Press TAB or SHIFT+TAB).
Boldly removing it with { outline: 0; } breaks usability.
There is a better JS way that doesn’t mess up usability and it fixes the “dotted border” in IE6 and IE7..
I described it in my tutorial on the subject: http://haslayout.net/css-tuts/.....cked-Links
For the guy who is saying that he wants his browser behave like it was configured, see that tutorial as well, it tells about user sheets where you can specify to have that border enabled still when people use the code presented on this page.
Cheers!
December 4, 2009
Quote
This is particularly annoying for flash elements like a splash page callout with nav links. There is ZERO usability advantage in this case, because the link is usually a small subsection of the flash movie, but the dotted border goes around the entire flash element.
To get rid of it in this case, I duplicated those two a: css lines for object: and embed: tags.
December 6, 2009
Quote
This is really handy, I had a client mention this the other day on one of the websites we designed for them so I’ll give it a go! Thanks
Ryan
June 3, 2010
Quote
Thanks alot.
July 2, 2010
Quote
I’ve been browsing through your blog, and this is great, it’s one thing that has bugged me for absolutely ages. You my man, as they say - are a STAR!!