Firefox Anchor Outline Issue

Question

The following snippet is causing me a QA headache.

<div id="links-container">
  <ul>
    <li class="resource-link li-sep"><a href="http://www.somesite.com/members/category/?catID=8" target="_blank"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>&raquo;</span></a></li>
    <li>...etc...</li>
  </ul>
</div>

I tried this in CSS, but nothing is working;

#links-container ul li a { color:#C28234; }
#links-container ul li a span { font-size:140%; line-height:1em; }
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; }
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; }
#links-container ul li a:hover { color:#75450A; }

What's happening is that in Firefox, when you tab through the links, it's creating outlines around both sets of text which have close proximity to each other and are causing overlapping outlines.

Our project mgrs wish to keep the outlines to promote accessibility.

If you view it in Chrome, it will wrap the entire contents of the anchor in an outline. And we consider this to be perfect. My question is, can something be done that can replicate this in Firefox. Or at the very least, clean it up so that the outline doesn't look like dung when Firefox individually outlines each text item in the same link.

Anyone else ever have to deal with this? If so, how'd you get past it?

Thanks

Answer 1

Well. It's a partial solution, but can work in your case. If you you have problem with menu items only you can apply "display: inline-block;" to links in here, to make it have a common outline.

Example: jsfiddle.net/zDbsQ/2/

EDIT: Fixed link to example, original was wrong.

Answer 2

You can just use:

#links-container ul li a *{ outline: none; }

This will select all elements within an a and disable the outline..