Strange border on tabIndex on <p> element

Question

I'm currently trying to make some show/hide content more accessible on a large site (in excess of 30,000 pages) and I've come across a weird bug when adding tabindex where a dotted border appears when clicking on the control to open the hidden content.

The set up with p tag which you click to fadeIn a div which shows the hidden content. I can't modify the HTML at all due to there being thousands of these across the site so this is what I have to work with. At the moment to add tabindex i'm doing it dynamically with jQuery, adding an ever increasing tab index to each p tag.

My first though to get rid of this weird border was to try CSS:

#content div.showHide p.showHideTitle:focus, 
#content div.showHide p.showHideTitle::focus, 
#content div.showHide p.showHideTitle::-moz-focus-border {
    outline: 0px !important; border: 0px !important;
}

This works in Chrome and Safari but in IE8 and Firefox 3.6 I still get the border when I click on the p tag. Any suggestions for how to get rid of it?

Answer 1

whats about:

#content div.showHide p.showHideTitle {
    outline: none !important; 
}

You are setting the outline style for the pseudo class :focus but this may be "to late". Here a simple jsFiddle