SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Visited image advice

    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.

  2. #2
    SitePoint Member Jacob.3336's Avatar
    Join Date
    Nov 2012
    Location
    California
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

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

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

    Code CSS:
    img:visited {outline:none;}

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jacob.3336 View Post
    Code CSS:
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •