I love Firefox, it is my favoured browser but there is one little thing that really frustrates me, especially from a designer point of view. You may, or may not have noticed that the browser adds a dotted border around hyperlinks that only become visible upon activating the link. For many this is probably not a problem as its not exactly causing any problems to anyone, but I don’t like it.
To remove this border, all you need to do is add the two lines of code shown below to your sites Stylesheet and wahlaaa, gone! Many of the big sites haven’t even bothered to do this, a few to mention are Microsoft, Twitter and YouTube.
Anyways, here is the code…
a:active { outline: none; }
a:focus { -moz-outline-style: none; }
I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below…
I know how annoying (and unsightly) the focus outline can be, but it actually has an important function for accessibility. When people are trying to navigate through a page by keyboard (with no mouse, either due to a disability or due to personal preference) the focus outline is an important navigation aid so they can see where they are on the page. I have gone through this aesthetics vs. accessibility trade off on this issue many times, and it is up to the designer to decide, I just wanted to mention this concern.
Great blog and cheers!
@Chad - You know what, I never thought of it in that way, thank you for your comments Chad, I guess your right, from a Accessibility point of view, it would be essential for navigating around the page!
Yeah, I echo Chad’s comment completely. IE handles this amazingly well though, surprisingly. A clicked link won’t have an outline, but a link accessed via keyboard navigation will.
I suggest finding a way to work within your design aesthetics and still incorporate a focus style in your CSS. I’m sure you can come up with an attractive way to highlight selected links.
[...] Removing the Dotted Hyperlink Borders [...]