How to get rid of the dotted box

[ncbugeye]

I have a set of tabs created with JavaScript and CSS, which are correct from a functional point of view. There is just one minor cosmetic detail - after rendering itself and its intended result correctly, the actual tab that was pressed has a thin rectangular dotted box around it which completely ruins the UI effect I am trying to achieve. If I click away anywhere in the page it disappears. I have text-decoration: none specified.

I have some other tabs in other pages that do not have this after-effect but cannot see why they are behaving differently form the ones that have the problem.

Inspiration?

[rcain]

hi try
-moz-outline: none;
&
outline:none
in you style sheet defs: eg:

.bigbutton:focus {-moz-outline: none; /* fx 1.07*/ outline:none /* fx 1.05,
Safari, Mac IE*/}
)

[encyclo]

Note that the dotted box (or an alternative) is an accessibility requirement - it adds a visial clue when navigating the site links via a keyboard. Removing the accessibility aid reduces the usability of your site by making a mouse obligatory for visual navigation.