Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
Thanks a bunch! worked like wonders! :-) –  user9829 Aug 2 '12 at 7:00

2 Answers 2

up vote 8 down vote accepted

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>
share|improve this answer
    
Thanks, Ryan. That worked like a charm :) And thank you for the detailed instructions. –  Alex C Jul 21 '11 at 4:09
    
Awesome! Been struggling with it for hours, can't believe the answer it's so simple :) –  user5135 Oct 6 '11 at 12:09
    
@Jireh I went ahead and converted your answer to a comment. With a bit more reputation, you will be able to post comments everywhere. –  Kit Menke Oct 6 '11 at 13:39
1  
For all Clickable items (links included) you could also go further to disable the "selection box" when you click on by using "outline-style:none" attribute. –  C. Marius - MVP Apr 25 '12 at 21:28
1  
@TempaC - yes it is –  Ryan Mar 22 '13 at 11:23

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/

share|improve this answer
1  
Are you sure about that? I think you should be styling the IMG not the LINK. –  Ryan Jul 20 '11 at 7:30
    
I didn't have a chance to check this yesterday, Ryan is correct you will need to override the IMG child element of the the anchor tag "a". –  Jesus Shelby Jul 20 '11 at 12:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.