How to get rid the horrible rectangle arround <a> tag

Question

Hello.. I am developing a website and everywhere i have this annoying problem... I wonder how other sites dont have this problem... any suggestion? stackoverflow has this problem as i see... http://inath.gr/ this site for example at the top menu although it has <a> tags there is no rectangle arround it when selected somehow..

Answer 1

CSS outline property:

You can turn it off with:

<style type = "text/css">
    a {outline:0;} /*this is that dotted line you get when you select an image, I believe you're talking about the outline*/
    a img {border:0;} /*Images in links default to having a blue border, so this could be the source of another annoying rectangle*/
</style>

Answer 2

The following is considered better because it allows users to still navigate by keyboard.

Here is a link explaining why: http://people.opera.com/patrickl/experiments/keyboard/test

a:hover, a:active { outline: none; }