Visited image advice

[foshan]

Hi all,
Can someone please advise me on the CSS to get rid of the dotted border on a visited image. I have created a link so that a visitor can click on an image to enlarge it but i don;t want the dotted border after it's been visited. I know it's a:visited { but can't find the right code to get rid the border.

[Jacob.3336]

Well first "dotted border". Sound like you are using Firefox.

Just use regular pseudo classes. The outline is what causes
the dotted border.

img:visited {outline:none;}

[Stevie D]

img:visited {outline:none;}

...will do nothing. The link pseudo-states ( :link, :visited, :active, :focus and :hover ) only apply to the a tag and not to anything else. You can't "visit" an <img>.

You're right that it's the outline we need to look at, but the outline will almost certainly be on the <a>, not the <img>. But does the outline remain after you've clicked onto another image? I would be surprised if it does, because that isn't default behaviour. I would say it's more likely that the outline remains until you activate another link ... in which case it isn't :visited you need to target but :active. Of course, unless you put on a class or parent element/class to target only the picture gallery links, it will apply to all links on the page.

[ralph.m]

It's not a good idea to remove outline altogether, as it's an accessibility feature. You can change it to something other than the dotten line, though, with something like this:

a {ourline: 1px solid white;}

Choose a color that suits, as and mentioned, you might just want to target this particular <a> rather than do this for all links.

[foshan]

Thanks all for the advice iv'e now managed to get rid of the outline but i think i'll take Ralph's advice and add a custom outline. I have targeted this link and not used it for all. Thanks again.