

Aug 14th, 2008
Maruf scribbled this post.
Maruf scribbled this post.
I’ve noticed that a lot of websites have an unexpected dotted border around links in Firefox. A lot of the times you can get away with it because it doesn’t look too odd (depending on your CSS). However, I’ve seen cases when it looks pretty odd.
Here’s an example:

I’ve actually taken that screenshot from a web design agency website (which is ironic). Everytime I click on a link, that odd border appears, and stretches across the entire screen.
The Fix
The fix is pretty simple. In your CSS stylesheet just add the following few lines under your CSS global declarations (at the top of your stylesheet). That will ensure that none of your links will suffer from the problem.
View Code CSS
1 2 3 4 | a:active { outline: none; } |
Filed away: CSS











comments
The 100% working fix is:
a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }