7

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.

0

6 Answers 6

11

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>
7
  • Thanks, Ryan. That worked like a charm :) And thank you for the detailed instructions.
    – Alex C
    Jul 21, 2011 at 4:09
  • Awesome! Been struggling with it for hours, can't believe the answer it's so simple :)
    – user5135
    Oct 6, 2011 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, 2011 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. Apr 25, 2012 at 21:28
  • 1
    @TempaC - yes it is
    – Ryan
    Mar 22, 2013 at 11:23
2

Add a Content Editor Webpart to the affected page. Edit the HTML for the webpart. Paste in the following text:

<style>
   a img {border:none}
</style>

This will remove borders from all images with links on the page.

2

Within SharePoint Designer right click on the image's web part and select picture properties, select appearance and change border thickness to 0 and the blue border disappears.

1

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/

2
  • 1
    Are you sure about that? I think you should be styling the IMG not the LINK.
    – Ryan
    Jul 20, 2011 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". Jul 20, 2011 at 12:38
1

Click on site actions (top left corner of screen) Go to : Site settings - Look and feel - site theme Change the selected color for the "followed Hyperlink" to white (color code is #F8F8F8) Click apply.enter image description here

0

I used the following code and it worked:

<img src="image.png" alt="Trust Pilot" border="0px" style="border:none!important; outline:none!important;">

The border is created from the outline attribute just make sure you have it as none. I hope this will help someone else

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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