Journal

Removing Dotted Links

12 January 2006 › 69 comments

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.

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 for pointing it out in the comments of this article.

Discussion + Dissension

1. #1 Lea

   Nathan, omg, thanks for this. I remember noticing this a lot but just kind of ignored it, irritated, thinking I couldn’t do anything about it, but I suppose you can! Thanks.

2. #2 Wesley Walser

   I had noticed this, but figured there was just some new makup on the scene. Thanks for the nice workaround.

3. #3 Alex Giron

   Thanks for your fixes, definetly come in handy…

4. #4 Dave S.

   Not only is it annoying, but it actually adds a few pixels to the width/height of the link, and if you’re using something like the overflow: auto method to clear floats, it’ll cause bad things to happen. Just ran into this recently and ended up reflowing my layout because of it, but this outline method oughtta work nicely. Thanks for writing this up.

5. #5 Yannick

   Thanks Nathan, I have been a little annoyed at times with the problem, so at least I don’t have to worry about that now with the little fix for Firefox.

6. #6 Larry

   And here I was, hoping it was something I could fix in Firefox itself :( Oh well, it looks like the tip came in handy for some people :)

7. #7 Andy

   Oh Thanks a LOT! I had gotten so used to using Firefox that for some reason I never even saw the thin dotted lines. I’m serious. I didn’t see it. I had no idea what you were talking about until I immediately went to my own website and saw the dotted lines pop out of nowhere for the first time. Now I’m going to be annoyed by it from now on…or at least until I utilize your fix here. I suppose it’s a little like living with a grandfather clock and never hearing it chime or by a train track and never hearing the train.

8. #8 Craig

   Here’s how to fix this permanently without proprietary CSS:

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

   There you have it.

9. #9 Josh

   Great tip, will have to use this one. I just hate that dotted line floating around. Thanks again!

10. #10 Mary

    I don’t wanna be a killjoy, but this completely screws keyboard navigation. Better to use JavaScript to blur() links onmousedown.

11. #11 Ara Pehlivanian

    You learn something new every day! Thanks Nathan, this rocks!

12. #12 Nathan Smith

    I am glad that everyone is finding the CSS tweaks helpful, for the most part.

    Craig: On some gut level, I knew that about:config could probably fix this, but didn’t know where to start looking, so I just went straight to the source.

    Mary: You bring up a good point, and at the same time an argument against the link handling in Opera, which does not use any :focus borders by default.

13. #13 Bramus!

    Excellent tip!

14. #14 Marko Dugonjic

    Great work, Nathan! I particulary like the a:active snippet. Removing it completely is not an option…

15. #15 David Dorward

    I started out by typing up what was effectively a rehash of Mary’s main point, then I noticed what she had said and decided to have a go at implementing her JavaScript suggestion. Before I knew it, I’d ended up with a rather long waffle on the subject. Code is included if anyone is interested.

16. #16 Matthew Pennell

    Nice tip, although a preferable outcome of this change in Firefox 1.5 would be if developers switched to using an image replacement technique that is more accessible, like Gilder/Levin.

17. #17 Li

    Thanks for this! You have no idea how much this bugged me every time i got online.

18. #18 trovster

    Urm, correct me if I’m wrong, but overflow: hidden; removes this little nasty… and it even makes sense. So no need messing with the about:config or anything like that…

19. #19 Stu Nicholls

    I have several demonstrations of removing the active borders using just conforming css.
    http://www.cssplay.co.uk/menu/nodots.html
    and of making links in various non overlapping shapes
    http://www.cssplay.co.uk/menus/jigsaw.html

20. #20 Vlad Dumitrica

    IMHO the easiest way to get rid of that large focus rectangle is to set “overflow: hidden” for the link inside the list. I think it’s the normal behavior to “stretch” the rectangle, as you pull the text in one side, by setting its text indent to a negative value. Try it and you’ll notice the difference.

    I got around this problem when I was testing a site in Safari and noticed a long underline. WOW… that was the link’s underline. I set its overflow to hidden and there was only image replacement, no more underline.

    So… Trovster is right ;-)

21. #21 Jeroen Mulder

    Very interesting solutions. Thanks for sharing this!

    I’d also like to give my support to the “overflow: hidden” solution as well. While it might not always be a guaranteed fix, I’ve found that in the things I have done so far, it does work flawlessly.

    Perhaps it’s worth mentioning.

22. #22 Mark Priestap

    Great article Nathan. It’s been a while since I read a CSS tutorial that was this unique.

23. #23 Ryan Latham

    Thanks for this Nathan. I remember seeing this happen when the Firefox 1.5 release clients started coming out. I assumed that it was just a glitch for the moment and it would eventually be fixed, however with the release of 1.5 this issue was still evident.

    I never did any research on it myself, because, well I got lazy. However I have been working on a project and this issue was bothering me so much that I was about to look into it further.

    Well, thanks for saving me from the trouble of investigating this issue.

24. #24 Nils

    I must say this is a very bad advice. You are making your own site inaccessible by removing the outline on focus.
    You cannot possible see which link that is focused when you tab through the links. The outline is there for a reason. Not everyone relies on the mouse to navigate through a page.
    Of cource you can style it to fit more in to your site, though that would inflict on the usability, by removing a feature that people are used to have in their browser.By removing the outline style it is harder to know wheter or not you really have clicked a link.
    If you have a valid reason to change the outline style. You really ought to have some visual styling on the :focus, that differs for the other psuedo-classes.

25. #25 Jonathan

    Great tip Nathan, thanks for the update about active links as well.

26. #26 John

    I’ve been using overflow: hidden; in all the cases I’ve used the ‘Phark’ image replacement technique, and I haven’t come across any issues while doing so. I haven’t tested in Safari or on older browsers, but surely there isn’t any problem with doing this? It seems to make sense.

27. #27 mjwillis

    I just wanted to cosign on the a {overflow:hidden} solution. It resizes the outline to your intended link area, and doesn’t disable outlines for those who need or expect them.

28. #28 Trevor

    Very nice thanks :) this has been bugging me. Also, “Oddly enough, Firefox on Mac does not have this incorrect outlining misbehavior.” I own a mac and I still see it.

29. #29 Rob

    Nathan, you’re my hero. I suggest we make a Nathan Smith action figure… HUZZAH!

30. #30 Cheyne

    This is incredible, I thought I was the only one who hated this.

    I blogged about it on http://thewebdesignblog.com

31. #31 David

    Man, you just made my day! Firefox 1.5 on Mac does do it, but the way. This drives me up the wall, and I have been trying since its release to figure it out. I thought it was a problem with my code until I saw it happening on sites of some of the css gurus.

    Seriously—Thank you!

32. #32 Nathan Smith

    Nils: Actually, this doesn’t make your site inaccessible. If you only apply it to a:active, it still allows for navigating with keyboard tabbing. Thanks to all who chimed in on the overflow: hidden. I wasn’t aware of that possibility.

    Stu: I’m digging that overlapping jigsaw shapes tutorial! That’s so cool how it can be used to make arbitrary shapes that are clickable just on the shape itself. That has to be one of the best CSS examples I have ever seen.

33. #33 Ivan Minic

    Thanks for the tips ;)

34. #34 Elliot Swan

    That’s good to know, I agree that’s quite annoying. Now lets see if 9rules fixes their site. Thanks for the tip. :)

35. #35 Dennis Bullock

    Excellent tip Nathan.

36. #36 Douglas

    Thats any way to remove these dots from entire windows? Please send me a e-mail. Thanks.

37. #37 Stu Nicholls

    Thanks Nathan, I have been investigating this method for the last couple of weeks and believe that it can be put to all sorts of uses. I have just added another example for circular links using the same principle :
    http://www.cssplay.co.uk/menus/circles.html

    But one of my regular visitors (Drew) is currently working on a method of using this for image maps. I look forward to seeing his results.

38. #38 David

    Yep, Firefox 1.5 Mac does do this. I defnitely like the overflow: hidden option.

39. #39 Jon Aldinger

    Great tips Nathan, and I’m glad people are keeping accessibility in mind. For those favoring overflow: hidden, take care to hide this rule from IE5/Mac or you risk hiding the entire element – not just the text-indent – which could wreak havoc for this limited user base, especially on navigation.

40. #40 Nils

    > Actually, this doesn’t make your site inaccessible. If you apply it to a:active it still allows for navigating with keyboard tabbing.

    Not true. You have to apply it to :focus to be able to see it when navigating with keyboard tab. :active is only visible when you actually click the link.
    And you are breaking usability when you try to remove outline for :focus. If you really don’t like the look of it, remove it from your own broswer with the “Browser Tweak-metod” you mentioned rather than remvoing it all together for every single user that visits your site.

    Anyway good to see that you have removed that style from this site :)

41. #41 Nathan Smith

    Nils: That was my point. By applying it only to a:active instead of applying it generically to every link, you still allow for the browser’s default to handle the a:focus. We’re both saying the same thing, but you aren’t understanding what I’m trying to say. I didn’t mean do both, I meant do one or the other.

42. #42 old9

    I think this might be a bug of Firefox 1.5

    This is what the spec says:
    The outline is drawn starting just outside the border edge.
    ( http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines )

    It seems that Fx draws the border correctly but messes up the outline.

43. #43 Elise Smith

    Nathan, you know your old Mom isn’t very computer savy, but I had to laugh when I read Andy’s comment back to you! It just goes to show how you are able to perfect things by tuning in to the details and knowing how to change them.

44. #44 2006guy

    It worked…..like magic. thanks 4 this tip

45. #45 macewan

    isn’t the outline done for accessibility reasons?

46. #46 Dustin Diaz

    I first found out about this on stylegala.com by looking at their css and wondered why they “didn’t” have that bug, and my site did. A quick glance at the CSS file and the answer was right there.

47. #47 Marco

    This has got to be the best CSS tip I’ve read in months. Thanks a lot!

48. #48 mynimal

    Hey, thanks for that. I noticed this annoyance earlier today, glad I found this fix for it.

49. #49 Nathan Smith

    Macewan: The outline is there for accessibility, as an indicator of the link that was last / currently focused on. That’s why I provided the alternative method of a:active which will still allow for links to be focused.

    2006guy / Marco / Mynimal: You’re welcome. I’m glad that you found it helpful. It was something that had frustrated me to no end, so I figured if I let others know about the solution, I won’t see it on so many pages anymore.

    Dustin: I hadn’t realized that Stylegala was using it, until after I submitted it to the public news. Oh the irony. I’m no pioneer obviously, but just wanted to help to get the word out there. I wasn’t aware that it was already in use.

50. #50 Su

    I’m confused(?).
    Why is the third code sample(with -moz-outline-style) invalid? It a vendor extension. The W3 CSS validator chokes on it, but that seems to be a failure on its part, not the rule. At worst, it(and any non-applicable browsers) should just ignore any rules starting with a dash or underscore, no?

51. #51 Nathan Smith

    Su: That’s a good point. However, I think that the W3C is simply acknowledging the existence of vendor extensions. There’s probably no way of them taking into account all the possible ones that exist. Also, consider they’re not a W3C standard, which is all the validator is able to check.

52. #52 Su

    That doesn’t answer my question, though. Yes, the vendor extensions are non-standard and so the validator can’t check them, but they are not invalid, as you state.
    They’re explicitly allowed for in the spec, to the extent that it documents the extensions they already know about.

    It should arguably be ignoring them altogether, or issuing a warning that there’s an extension property being used, not listing a full-on error and mysteriously complaining that they’re “unrecognized.”

53. #53 Nathan Smith

    Su: I agree, and thanks for pointing it out. The validator should skip them entirely. Perhaps the validator is just a bit behind the written spec? At any rate, I like the idea of using outline: none; rather than the Mozilla specific one, so that other browsers that recognize it will follow make the change too.

54. #54 Joshwa

    Excellent! Very useful tip! Can’t wait to use it.

55. #55 Sloth

    Thank you very helpful! You rock.

56. #56 James Mitchell

    Nathan: Thank you very much! I knew that this bookmark would come in handy.

57. #57 Birgit

    Very useful, thank you! I was already wondering how o get rid of those ugly outlines…
    With accessibility in mind, I tried using it like that:

    a {outline:none;}
    #mainnav a:focus,
    #mainnav a:active {background-color:#FFF;}
    (white being the color for hovered and active links in the mainnav)

    Hope this will do the job (I’m just a beginner in accessibility issues).

58. #58 Nathan Smith

    Birgit: I think that would do the job nicely. Also keep in mind that if only one particular area of your site layout is giving you trouble, you can always get rid of the dotted outline on just that part, by specifiying decendant selectors.

59. #59 Ripster

    ..i am glad to be on the right road with this hint from you. But unfortunatley on my current web-projekt this doesn’t work for me. No matter where i put the a {outline: none;} the nasty dottet frame never goes away. I tried it as a decendant selector in the css body tag as well as in the specific #navigation – always no effect.

    I would be glad for help.

    thank you.

60. #60 Nathan Smith

    Ripster: Without seeing your actual site, I can’t accurately determine the source of your problem. Keep in mind though, this works only for Firefox, and is not a universal solution for all other browsers.

61. #61 Petrus

    remove focus on all browsers…

    as a complement to the above good hints you can put this to the document.

    function remove_focus() {
    // Clean out focusoutline from links
    if (document.links) {
    try {
    for (var i=0;i

62. #62 Petrus

    remove focus on all browsers… (where did half the code go??)
    There seem to be a problem with content here – get rid of the backslash in the for loop – its a fix for the content on this site.
    function remove_focus() {
    // Clean out focusoutline from anchors
    if (document.links) {
    try {
    for (var i=0;i \< document.links.length;i++) {
    document.links[i].blur();
    }
    } catch(e) {}
    }
    }
    document.onClick = remove_focus();

63. #63 Nathan Smith

    Petrus: Seems like your problem was due to Textile parsing. For future reference, you can put code in your comments by using the proper syntax, though it would probably be best just to link to your own site. Here’s a brief overview – Textile Help.

64. #64 Eric O'Brien

    Still no answer about how to accomplish this for IE 6. Note that I want to hide the visual effect, not disable the feature of tabbing through links. (The link/item with focus displays info in the status bar, by the way.)

65. #65 Nathan Smith

    Eric: This article wasn’t about IE6, but if you really need to remove dotted links, there’s a JavaScript way to do it. It was described by Cody Lindley.

66. #66 Tema

    onfocus=”this.blur()”

67. #67 Johannes

    Great fix right there!

68. #68 Jason Beaird

    The behavior on Firefox 1.5 mac is a little different than on pc, but as everyone has said already, it’s there. Here’s a screenshot from a personal project I’m working on. Thanks for posting a solution!

69. #69 Nathan Smith

    Jason: Hey, I’m glad it works. I was a bit uncertain as to how Firefox on a Mac would handle it. I’ve not yet made the Apple “switch,” but am planning on it.

Comments closed after 2 weeks.