How to get rid of border around and image used as a link in Firefox?

Question

Weird question I think its more of I am not sure what it is called. But I have an img wrapped in an link

example

...<li>
  <a href="#link">
    <img ...>
  </a>
 </li> .....

Now I have the css border rules all to 0. So their is no Blue border. But in Firefox their seems to be a pink mini dashed border only when I click on the image? In other browsers there is no border at any time. Im not sure if its from the browser itself or something I am missing. In my css I have border set to 0 on the a,:hover,:visited I even put text-decoration to none thinking that might help. But to know avail. I tried searching online for help but all I get is info on removing the border caused from placing the image in the link. So any help or a point in the right direction would be great. ! edit// I added a picture to better explain what I am talking about.

Answer 1

Links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text

To remove it, simply use:

a {
    outline: none;
}

Or you can do what I do, and remove it from all elements (I use my own focus/active rules) and do

* {
    outline: none;
}

This will remove it from all elements.