Firefox shows blue box around image link

Question

I have an anchor tag around all of these images on my site. When you click it, it scrolls to the id "template".

<a class="hi" href="#template"><img src="images/01.png" /></a>

I have tried every trick in the book.

a img{border:none; outline: none;}

border=0 in the image tag itself.

No matter what I do there's always a blue border around the image once you click it. Click any of the circle images (towards the bottom) for reference. Remember, to view in Firefox.

http://stevendennett.com/newsite/

Thanks!

Answer 1

The dotted border around the image is the Outline of the <a> tag. So that, when you remove the border and outline in img it will not be the solution.

The solution is

We don't need to put to much code. Try here:

a { /* Remove all the outline border all in our document. */
   outline: none;
}