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.

Answer 2

Install Firebug and see what's going on. I think what's going on is img tag probably has a default border.

To remove it maybe you can try putting your a and img tags inside of a div with an id and using following CSS:

Your HTML:

<div id="test">
  <a...>
  <img .../>
  </a>
</div>

And use the following CSS:

#test img { 
  border-style: none; 
}