4

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;
    }
Federico klez Culloca
  • 26,308
  • 17
  • 56
  • 95
fomicz
  • 1,752
  • 7
  • 25
  • 33
  • Can you add a screenshot of your problem in your question? – Abhinav Sarkar Sep 14 '10 at 10:16
  • 2
    "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 Sep 14 '10 at 10:21
  • @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 Sep 14 '10 at 10:29

3 Answers3

12

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;
}
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
8
a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

works for me in FF22

gidzior
  • 1,807
  • 3
  • 25
  • 38
4

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;
}
Marko
  • 71,361
  • 28
  • 124
  • 158