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)

5+ Year Member

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)

5+ Year Member

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)

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

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month