I recently got bumped with a strange Link behavior. A user had a hyperlink which opened in a new page. When she clicked on it, a dotted border appeared around the Hyperlink as shown below:
I had seen this behavior a couple of times in the past but never thought of a solution until now. After trying a couple of solutions, what worked out was adding the following CSS to the page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Remove Dotted Border in FireFox</title>
<style type="text/css">
a:focus {
outline: none;
}
</style>
</head>
<body>
<a href="#" id="anchor1">Click Here</a>
</body>
</html>
I have tested the solution in Firefox 3.0 and above and after adding the CSS, the dotted border does not appear anymore when the link is clicked
Nice, and so simple. That's something that's always bugged me about Firefox.
ReplyDeleteThanks for this, our current app had this problem in Firefox, this fix works a treat. A minor UI issue, but it makes the app look just that bit more polished. :)
ReplyDeletePlease don't do that, it can make it more difficult for users with disabilities to navigate the site without a mouse. Try setting the :focus style to look the same as the hover/active styles so people unable to use a mouse will still have a visual cue to navigate the site. See this:
ReplyDeletehttp://www.allaccessblogging.com/link-focus.html
Nice suggestion Anonymous and thanks for that link!
ReplyDeleteChris and Anonymous - Glad you found it helpful.
Hey, Thanks a ton... This small highlighting border always irritated me a lot :P Thanks you, its gone now ;)
ReplyDeleteSweet!
ReplyDeleteThank you very much - being new to CSS it would have taken me ages to figure out - thanks again :)
ReplyDeleteIt does appear when I click the above image in my firefox
ReplyDeleteThis WORKS!
ReplyDeleteI've been looking for this for DAYS! Only tried 'border' and 'border-style' or specifying the border to 0px, but nothing worked.
It's clearly the 'outline' value that controls this pesky 1px dotted border!
One problem - you didn't do it for this tutorial!! Both the 'Click Here' images are styled the same.
You should apply the 'outline:none' to the second image, so people can see what's changed and that it works. Were I not so keen to try something new, I would have discarded this tutorial as there's no example of it actually working.
Great solution though! Well done and thank you!!
thanx a lot....
ReplyDelete