Question

I have an image that is a link. When I click on it it sends me somewhere and then if I click back to return on that page that image has a 1px dotted blue border around itself. Furthermore, if I click on it and hold that border becomes red. This is really bad looking and I cannot find a way to delete that border.
I’ve tried with

a:visited {text-decoration: none}
a:active {text-decoration: none}

and with:

a:visited img{text-decoration: none}
a:active img{text-decoration: none}

with no effect.
By the way, this border does not appear in chrome.

Here is my css code regarded to that image:

#back_to_photos{
float:right;
position: relative;
margin-top:-238px;
margin-right: 40px;

}
a:visited {text-decoration: none}
a:active {text-decoration: none}

Thank you!

Answer 1

This post describes how to do so. Namely, putting outline: 0; in your a:visited CSS should do the trick.

text-decoration only deals with things like underlines and strikethroughs. The problem you’re encountering is with outline that is put around clicked/focused links to tell the user that’s what they’re hovering over.

Do note that if you remove the outline it won’t be apparent where the user is if they’re navigating your page with the keyboard.