Can't get rid of dotted outline in Firefox links?

4
votes

I have a list full of a imgs:

<ul>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
(...)
</ul>

When I click them in Firefox, there's dotted outline (who the heck invented that and why? so ugly!).

I want to get rid of them, but style "outlines" etc. doesn't seem to work, I've tried all of options below:

#ul li img:active {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}     

#ul li img:focus {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}

 #ul li img a:active {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }     

    #ul li img a:focus {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }
3
cssfirefoxoutlinedotted-line
Can you add a screenshot of your problem in your question? – Abhinav Sarkar
"who the heck invented that and why? so ugly!" Accessibility. Because you need to indicate which element is focused when you are tabbing down the website with a keyboard. Don't just remove it with outline: 0 - think of an alternative for those users. – Yi Jiang
@Yi Jiang, that's what the anchor states are there for. A good developer should use a:active, a:focus, and optionally a:visited for accesibility - it doesn't always have to show an ugly outline. It works for tabbing too. Oh and I'm pretty sure it's turned off by default in all the other browsers. – Marko

3 Answers

12
votes

You need to apply the styles to the <a> tag (your latter two CSS rules are wrong because you've put the <a> tag inside <img>.

This works for me:

a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

Or, for only inside the element with ID ul (not the best name, by the way):

#ul a:active,
#ul a:focus {
  outline: none;
  -moz-outline-style: none;
}
8
votes
a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

works for me in FF22

4
votes

outline: 0 should do it and it should be applied on the <a> element, which is not actually a child of <img />. <img /> is a child of <a> so your css should read:

#ul li a {
    outline: 0;
}