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.
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;}
[font=verdana]…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.[/font]
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.
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.