Removing dotted links

— Topic: css

Fixing the Fox

Update: If you want to retain the dotted border for tab-based navigation, apply this to a:active. This still allows the indicator to appear when focused by keyboard, but hides when mouse activated. It's the best of both worlds…

a:active {
	outline: none;
}

It is no secret, I love Firefox. I have been using it since the beta version of 0.8. Firefox 1.5 though, has a quirk that proves to be a minor irritation every time I use it. I am of course referring to the dotted outline that appears around every link. In versions previous to 1.5, the outline behaved similarly to Internet Explorer on Windows, wrapping exactly around clickable areas.

Now though, it wraps completely around links that have negative value applied to text-indent. This method was popularized by Mike Rundle, and is widely used on many websites. Below is a screenshot of the link behavior on the 9rules Network homepage, as viewed in Firefox 1.5 on Windows. Oddly enough, Firefox on Mac does not have this incorrect outlining misbehavior.

dotted link

Designer Tips

If you dislike this quirk as much as I do, you're in luck. I will provide a few methods for squashing this bug as a web designer, and another tweak which will completely remove it from your browser's default behavior by editing the CSS that controls the user interface. First, let's look at web design tricks. In your CSS document, just start out by putting this universal rule for all links:

a {
	outline: none;
}

My coworker Cody Lindley has also come up with a solution to this problem, via specifically targeting Mozilla based browsers. His method involves universally targeting the :focus pseudo class. He wrote an article on using JavaScript to remove the focus border in browsers such as Internet Explorer. The CSS for his method is listed below. It works for Mozilla, but isn't valid.

:focus {
	-moz-outline-style: none;
}

The great thing about using outline: none; when designing is that other browsers that don't mis-interpret the dotted border aren't affected by it. IE6 still renders it, as does Firefox on Mac. Opera by default has no indicator.

Browser Tweaks

CSS Validation is a big pet-peeve for me, which is why I opted to explore other options, and came up with the simple outline: none; method. This is the same syntax that we will use to tweak our Firefox installation on Windows, so that the border is gone for all websites. Don't worry, it is a very simple solution. Browse to: C:\Program Files\Mozilla Firefox\res\ua.css. Open the file in a code-editor that has line number, and scroll to line 123.

/* You Will See This: */

:-moz-any-link:focus {
	outline: 1px dotted invert;
}

/* Change It To This: */

:-moz-any-link:focus {
	outline: none;
}

Save the file and re-launch Firefox. That's it, you're done! Or, you can type about:config, then go to browser.display.focus_ring_width and set this value to 0. Thanks to Craig Erskine for bringing this to my attention.

Me, elsewhere