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.

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>
  • 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. – Marius Constantinescu - MVP Apr 25 '12 at 21:28
  • 1
    @TempaC - yes it is – Ryan Mar 22 '13 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/

  • 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
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, privacy policy and cookie policy

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