PDA

View Full Version : Remove Dotted Line



mrjokers
11-12-2006, 04:47 AM
1) Script Title:
Tab Content Script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem:
When you click on a tab, a small dotted line surrounds the image of the tab. I was wondering how you get rid of this line. Is there some kind of script I can put in .js or .css file? If so can someone tell me?

ddadmin
11-12-2006, 06:41 AM
Try the below, which Brian (a DD surfer) emailed me to say as far as what he does to remove the dotted line:

"To get rid of the ugly focus rectangle when you click on any of the tabs, you can add 'onFocus="this.blur();" ' inside each of the <li> items like so:"


<li><a href="#" onFocus="this.blur();" rel="tcontent2">Tab 2</a></li>

"I've tested this on both IE6 and FF1.5.0.7 myself and it works perfectly."

Twey
11-12-2006, 01:56 PM
Ugh. This totally breaks keyboard navigation.

jscheuer1
11-13-2006, 08:32 AM
Ugh. This totally breaks keyboard navigation.

Exactly my thoughts. How much control does the designer need at the expense of functionality?

ddadmin
11-13-2006, 08:48 AM
And personally, I actually like the dotted lines, especially as a feature in general.

Twey
11-13-2006, 06:45 PM
I don't, I think they're hideous :p There are much nicer ways that could be used to show focus nowadays; they're just left over from less advanced times (much like the horrible default blue-red-purple colour scheme for links). However, this is not the way to hide them.

ddadmin
11-13-2006, 11:07 PM
But when you have a list of plain text links on the page and you need to go through each one sequentially, that's when I really appreciate the dotted line feature.

Acey99
11-13-2006, 11:59 PM
a{outline-style:none}

jscheuer1
11-14-2006, 04:53 AM
But the whole point of this thread is to find a way to remove the 'ugly' outline without compromising the functionality of keyboard navigation.

With tab content, you can do something like so:


.shadetabs li a:focus {
outline:none;
color:darkcyan!important;
}


This will allow (in FF) the text of the tab to be highlighted in a color for navigation but, without the ugly dotted box. Other links will not be affected. IE will not respect this but, it won't cause the outlines in the first place unless keyboard navigation is initiated by the user. Opera appears not to use this for tab content to begin with.