Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

How to get rid of the dotted box

8:00 pm on May 19, 2007 (gmt 0)

New User

10+ Year Member

joined:May 16, 2007
votes: 0

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.


8:07 pm on May 19, 2007 (gmt 0)

New User

10+ Year Member

joined:Oct 5, 2006
votes: 0

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

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

8:58 pm on May 19, 2007 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
votes: 6

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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members