a: visited {text decoration: none} not working in Firefox

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.

Answer 2

Maybe is something wrong with the order of your rules (don't know these are the only styles mentioned in your example). What you could try is to 'force it' by using !important:

a {text-decoration: none !important;}

Hopes it helps.

Answer 3

the solution for your problem is this:

a:link, a:link:hover { text-decoration: none }

hope it helps.

more info on: squarefree.com/styles

Answer 4

You want to use outline: none.

Be careful though, hiding the outline can lead to usability issues, especially with those users who navigate with the keyboard.