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

Question

Hey.

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;
    }

Answer 1

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;
}

Answer 2

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 {
  outline: none;
}
a:focus {
  -moz-outline-style: none;
}

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

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