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

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

 

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.

 

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



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

 

Just add this in your css:
img {border:none}

Hope it helps!

 

Anywhere in the CSS file?

 

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.

 

Thanks a lot
Just done it on my SEO Mind website and it worked..

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
Quick fix, worked a treat

 

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.

 

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