(CSS?) Eliminating browser's 'selected' lines around a hyperlinked image?

Question

The attached screenshot is from OS X/Firefox 3. Note that the center tab (an image) has a dotted line around it, apparently because it was the most-recently selected tab. Is there a way I can eliminate this dotted line in CSS or JavaScript? (Hmmm...the free image hosting service has reduced the size of the image. But if you could see it, you'd notice a dotted-line select area around the block.)

Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png

Answer 1

You'll want to add the following line to your css:

a:active, a:focus { outline-style: none; -moz-outline-style:none; }

(Assuming your tabs are done using the a element, of course.)

[edit] On request from everyone else, for future viewers of this it should be noted that the outline is essential for keyboard-navigators as it designates where your selection is and, so, gives a hint to where your next 'tab' might go. Thus, it's inadvisable to remove this dotted-line selection. But it is still useful to know how you would do it, if you deem it necessary.

And as mentioned in a comment, if you are only dealing with FF > v1.5, feel free to leave out the -moz-outline-style:none;

Answer 2

In your onclick event, this.blur()

or, specifically set focus somewhere else.