How to remove those dotted lines that appear when clicking links in Firefox

I don’t know why I didn’t twig that this could probably be fixed with CSS, I always thought it was just the pains of different browsers and you couldn’t do anything.

Well I was wrong this little bit of CSS will get rid of the dotted line border that appears when clicking any links in Firefox. This is especially useful as I regularly use ‘oveflow: auto’ on a containing div. The dotted line problem can cause a horizontal scroll to appear when clicking links as the extra border that is added increases the width by 2px which causes nested elements to over hang, and result in the horizontal scroll bar appearing.

[sourcecode language=”css”]
a:active, a:focus, a:visited{
outline: none;
-moz-outline-style: none;
}
[/sourcecode]