CODEWITHSUNDEEP
css
RajivRisi
RajivRisi

Reputation: 398

How to remove blue line from image background

I have very simple code for email newsletter share icons. My problem is there is an background blue near the image. I removed outline and border using css for both image and anchor tag. But I am out of luck. Code here: http://jsfiddle.net/o70cd4g8/

My code:

<table align="center" width="500">
    <tbody>
        <tr>
            <td align="right">
                <div align="right" style="padding-right:0px">
                    <a href="" target="_blank">
                        <img border="0" style="border:0" src="https://s-passets-ec.pinimg.com/images/about/buttons/small-p-button.png" align="absmiddle" width="16" height="16" alt="Follow Me on Pinterest" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.seattleu.edu/uploadedImages/MarCom/youtube_16px.png" alt="youtube" title="youtube" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.nextbyte.com.ar/images/social/Twitter-16px.gif" alt="twitter" title="twitter" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://sfcv.org/sites/files/images/facebook-16px.png" alt="facebook" title="facebook" class="CToWUd">
                    </a>
                    <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://perishablepress.com/wp/wp-content/images/2006/feed-collection/feed-icon_orange-16px+.png" alt="RSS" title="RSS" class="CToWUd">
                    </a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 2

Views: 894

Answers (2)

tmg
tmg

Reputation: 20393

its anchor text-decoration

a{
        text-decoration:none;        
    }

or better add some class to those anchors and target them from that classname

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

You have to use text-decoration: none

table > tbody > tr > td > div > a {
    text-decoration: none;
}


table > tbody > tr > td > div > a {
    text-decoration: none;
}
<table align="center" width="500">
    <tbody>
        <tr>
            <td align="right">
                <div align="right" style="padding-right:0px"> <a href="" target="_blank">
                        <img border="0" style="border:0" src="https://s-passets-ec.pinimg.com/images/about/buttons/small-p-button.png" align="absmiddle" width="16" height="16" alt="Follow Me on Pinterest" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.seattleu.edu/uploadedImages/MarCom/youtube_16px.png" alt="youtube" title="youtube" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://www.nextbyte.com.ar/images/social/Twitter-16px.gif" alt="twitter" title="twitter" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://sfcv.org/sites/files/images/facebook-16px.png" alt="facebook" title="facebook" class="CToWUd">
                    </a>
 <a href="" target="_blank">
                        <img height="16" width="16" border="0" style="border:0" align="absmiddle" src="http://perishablepress.com/wp/wp-content/images/2006/feed-collection/feed-icon_orange-16px+.png" alt="RSS" title="RSS" class="CToWUd">
                    </a>

                </div>
            </td>
        </tr>
    </tbody>
</table>

Reason: text-decoration: underline; is applied to tag by default browser stylesheet, so if you want to over ride it or if you want that none of the tags on your website should have an underline than simply use this

Upvotes: 2

Related Questions