How to get rid of the selection box around my selection

Question

Howdy, I'm trying to create a website for myself and just ran into this issue:

As you can see there is some kind of selection visible in both images which I don't want to be displayed.

The first image is taken after I clicked the menu item. The second image is taken after the first when I additionally move the mouse over it.

These menu items are shown in a table. I am using FireFox 3.6.10.

Does anybody have an idea how to get rid of these selections?

Answer 1

Check out the outline CSS property. You should specify outline: none for your links in this case. The outline indicates that the given element has focus. You should provide something instead to make keyboard-only navigation possible.

Answer 2

If you remove focus from the link when the user clicks it, you will effectively get rid of that box. However, many people advise against this because it is considered bad practice and isn't very accessible.

Anyways, if you want to do it and don't mind JQuery, you can use this:

$('a').click(function () { $(this).blur() });

As "elusive" pointed out, you can also use the CSS outline property to prevent it, but that doesn't work on all browsers. (Read: IE7 and older.)

Answer 3

Well you could try setting the border to 0, I think that should work. Just set class='noborder' on your link.

<style type='text/css'>
    a.noborder {
        border: 0;
    }
</style>