Erase blue border on image in HTML email
Im trying to send a HTML email and I have this piece of code:
<a href="#">UP ;<img src="arrow.png" /></a></div>
But theres a blue border JUS开发者_开发知识库T around my image. How can I get rid of it. Thanks.
Unfortunately, the best solution is to use the deprecated border attribute since not all email readers parse/apply CSS... as a separate style section, a separate sheet, or embedded in the HTML. If you have a guaranteed audience (all using the same email viewer) then by all means use CSS if you can.
<a href="#">UP ;<img src="arrow.png" border="0" /></a></div>
For testing here's a simple HTML document that should show all the proposed solutions:
<html>
<head>
<title>IMG border example</title>
<style>.rion a img {border:0 none;}</style>
</head>
<body>
<div>1) Default:
<a href="#">UP ;<img src="arrow.png" /></a></div>
<div>2) Img border 1:
<a href="#">UP ;<img src="arrow.png" border="1" /></a></div>
<div>3) Img border 0:
<a href="#">UP ;<img src="arrow.png" border="0" /></a></div>
<div>4) A style border none:
<a href="#" style="border:none">UP ;<img src="arrow.png" /></a></div>
<div>5) Img style border none:
<a href="#" >UP ;<img src="arrow.png" style="border:none" /></a></div>
<div class="rion">6) Stylesheet a img style border none:
<a href="#" >UP ;<img src="arrow.png" /></a></div>
</body>
</html>
In my browser (Firefox) 1,2,4 show borders (default border on 1,4 is thicker), while 3,5,6 show none... however 5 & 6 rely on the email client being able to parse CSS, 6 in particular can get really dodgy with webmail clients (which mess around with style classes on base elements because they have their own CSS).
have you tried something like this:
<a href="#">UP <img src="arrow.png" style="border:none"></a>
?
Setting the border: 0 none; CSS property should fix that, if you wanted it to occur on all images wrapped in links, you could use it as such:
a img
{
border: 0 none;
}
For use in an e-mail, you may have to include a style block in the actual e-mail:
<style type='text/css'>
a img
{
border: 0 none;
}
</style>
jsFiddle Example
Your image is inside a link tag (<a>). The blue border is caused by the default style of the link. To fix this overwrite de CSS styles of the link setting the border property to 0:
<a href="#" style="border:none">UP <img src="arrow.png" ></a>
To be on the extra safe side, specify no border in both tags.
<a href="#" style="border: 0;">UP <img src="arrow.png" style="border: 0;"></a>
This question is a few months old, but I ended up here with the same question, so hopefully this may save someone the time I wasted.
The td has a background color of that neon blue, and by default has a bit of padding.
I just styled the td with...
style="background:none;"
I knew all about the border style defaults, and hadn't had the td background default in the mail clients I had previously tested, but it kept popping up in gmail.
See if this works:
<a href="#">UP <img src="arrow.png" style="border: 0 !important;" border="0" /></a>
Please let me know if this works.
Adding style="background:none;" to td or adding <style>a img {border:0 none;}</style> has worked for me.
加载中,请稍侯......
精彩评论