Remove link border from around image

Question

For SP2010, how do you remove the ugly blue border from images that have a link on them? I've tried adding style="border:0" on the anchor tag but to no avail. Thanks.

Answer 1

You need to apply the style to the IMG, not the HREF.

This will show the blue border (at least in IE and Firefox, Chrome doesn't)

<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png">
</a>

Neither of these will, first using the 'old style' border attribute

<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png" border="0">
</a>

Next using inline styles

<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png" style="border:none;">
</a>

And using CSS to take off the border for all images

<style>
   a img {border:none}
</style>
<a href="http://sharepoint.stackexchange.com">
   <img src="http://cdn.sstatic.net/sharepoint/img/logo.png">
</a>

Answer 2

Your styling the wrong element, you need to style the links. http://www.w3schools.com/css/css_pseudo_classes.asp

You can view styles applied by using the IE Developer tool, FireBug in Firefox, or Chrome developer tool.

Good blogs to keep bookmarked:

http://blog.drisgill.com/

http://www.heathersolomon.com/blog/