Welcome to WebmasterWorld Guest from 107.20.54.98

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

5+ Year Member

joined:May 16, 2007
posts:6
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.

Inspiration?

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

New User

5+ Year Member

joined:Oct 5, 2006
posts:10
votes: 0


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*/}
)

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
posts:9063
votes: 2


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