Quick Firefox fix for dotted border on links

November 23, 2007 • 3 comments

When using the Phark -9999px method for image replacements you should use one of the fixes for the border outline in order to solve the border problem on your designs. However these fixes are not all that widely used. Here is a way to use either of these fixes across all the websites that you browse using Firefox user style sheets.

In order to make Firefox behave a certain way for all websites that you visit you have to either edit the default user style sheet or the Firefox config file.

Mac users: navigate to {user}/Library/Application Support/Firefox/Profiles/Chrome{your user profile}
PC users: navigate to C:\Program Files\Mozilla Firefox\defaults\profile\chrome

and open the file userContent-examples.css and add either one of the solutions into the CSS file and save as userContent.css
Disable the border:

a {
    outline: none;
}

Tidy up the border:

a {
    overflow: hidden;
}

There is also a way to get rid of the outline border by editing the Firefox config file (keep in mind this will remove the border completely)

1. Type “about:config” in Firefox’s location bar
2. Find the string: browser.display.focus_ring_width
3. Set the value to 0

Now Firefox will behave as you want across all websites you visit. Gotta love user based style sheets.

Tags: , , ,

3 Responses to “Quick Firefox fix for dotted border on links”

  1. December 3rd, 2007 10:42 pm chocolaterain dude who sits next to you in JRs class :)

    you’ve been stumbled upon again! :)

  2. December 7th, 2007 10:00 pm Brandi

    AH i just stumbled onto this, haha

  3. March 16th, 2009 10:42 pm n

    ty so much for this fix. been bugging me forever.

Your 2 cents: