1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Link causing a purple border around images! (How do i stop this?)

Discussion in 'HTML & Website Design' started by Sean101, Nov 9, 2013.

  1. #1
    Hey, in the header of my website, the logo / banner links back to my home page (like most sites), but the link is causing there to be a purple border around the image that not only looks weird, but shouldn't be there. I know it is the link causing it because when I took the link off it and just had it logo image, it wasn't there, but when I put the link back on the image, the border came back again.

    This is my website that I am talking about: http://www.seomind.net/. Have a look and you will see it on the heard image / logo. :p How do I remove this border, keeping the link still on the image?

    PS: It is also happening the another website of mine around the affiliate button images at the bottom: http://www.seopromotion.org/. Not sure, but guessing it is that the code is wrong or something, can anyone help please? Thanks.
     
    Solved! View solution.
    Sean101, Nov 9, 2013 IP
  2. competent123

    competent123 Notable Member

    Messages:
    1,743
    Likes Received:
    69
    Best Answers:
    6
    Trophy Points:
    255
    #2
    i dont' see purple line on either of the two sites,

    maybe you can show us a screenshot, also, try to use another browser like chrome etc, to make sure there is no extension /addon that is messing it up.
     
    competent123, Nov 9, 2013 IP
  3. Sean101

    Sean101 Active Member

    Messages:
    245
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    90
    #3
    SEOMINDpurple.PNG

    It also happens on the smaller images or each tool..

    SEOMINDpurple2.PNG

    Here your able to see it on SEOPromotion.org ..

    SEOPPurple.PNG
     
    Sean101, Nov 9, 2013 IP
  4. #4
    Just add this in your css:
    img {border:none}

    Hope it helps!
     
    wiicker95, Nov 9, 2013 IP
  5. Sean101

    Sean101 Active Member

    Messages:
    245
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    90
    #5
    Anywhere in the CSS file?
     
    Sean101, Nov 9, 2013 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #6
    Well, yeah, it won't change anything, as long as you didn't declare some borders yourself. However, since that affects all IMG tags on your website, the best way would be to place it near the beginning. So if you want to change the border property of your IMG later, you won't have issues with priorities and overwriting.
     
    wiicker95, Nov 9, 2013 IP
    Sean101 likes this.
  7. Sean101

    Sean101 Active Member

    Messages:
    245
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    90
    #7
    Thanks a lot :D
    Just done it on my SEO Mind website and it worked..
    BorderRemovedFixed.PNG
    As you can see, it worked with all the images and not just the header, so thanks again!
    Ill go ahead and do it to my other website SEOPromotion :D
    Quick fix, worked a treat :D
     
    Sean101, Nov 9, 2013 IP
  8. Kreshnik

    Kreshnik Active Member

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    66
    #8
    It's the outline what you have to do is something like this a.logo:focus{ outline: none; } and the purple outline will be gone. :)
     
    Kreshnik, Nov 9, 2013 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Re wiicker95's answer: It may be better to use
    a img {
      border: none;
      }
    Code (markup):
    The border is due to the anchor parent's text decoration. The purple indicates the :visited color in this case.

    I am suggesting the increased specificity because 1) you have a special case to begin with; other non-link images don't have the border. 2) Should you want to style (non-link) image borders, it might cause the border to reappear on the link images.

    Just a thought.

    gary
     
    kk5st, Nov 9, 2013 IP