When you use a HTML link (“<a>” tag) to implement a drop-down list or menu, you’ll notice that there are annoying dotted borders around the link after it’s clicked in Firefox. We can just ignore this for most of the times but sometimes it affects the look and feel of the site. Two screen shots from Youtube and Yahoo!:
This can be even worse (Digg front page):
OK. This is fake :) . Digg did a perfect drop-down menu, though they’re ignoring something. I removed some CSS rules using Firebug and got this effect. It’s ugly, isn’t it?
When a link is clicked, it gets the focus. Firefox adds dotted borders to links that have focus to remind the users.
To avoid the border, add this CSS rule to your page:
This piece of code is similar to the code I removed from Digg to get the screen shot above.
In fact this is a common problem asked by many developers. For more information, search for “firefox link border“. Many authors wrote good articles on this topic.
Update – This can be seen on every WordPress blog login page (click to enlarge):