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.
Add a comment
|
6 Answers
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 CJul 21, 2011 at 4:09
-
Awesome! Been struggling with it for hours, can't believe the answer it's so simple :)– user5135Oct 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. Oct 6, 2011 at 13:39
-
1For 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
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.
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.
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:
-
1Are you sure about that? I think you should be styling the IMG not the LINK.– RyanJul 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
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.
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
