Remove Dotted Line

[mrjokers]

1) Script Title:
Tab Content Script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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]

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]

Ugh. This totally breaks keyboard navigation.

[jscheuer1]

Ugh. This totally breaks keyboard navigation.

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

[ddadmin]

And personally, I actually like the dotted lines, especially as a feature in general.

[Twey]

I don't, I think they're hideous 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]

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]

a{outline-style:none}

[jscheuer1]

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.