Dbugger Dbugger - 2 years ago 112
HTML Question

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 &nbsp;;<img src="arrow.png" /></a></div>

But theres a blue border JUST around my image. How can I get rid of it. Thanks.

Answer Source

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 &nbsp;;<img src="arrow.png" border="0" /></a></div>

For testing here's a simple HTML document that should show all the proposed solutions:

    <title>IMG border example</title>
    <style>.rion a img {border:0 none;}</style>
    <div>1) Default: 
      <a href="#">UP &nbsp;;<img src="arrow.png" /></a></div>
    <div>2) Img border 1: 
      <a href="#">UP &nbsp;;<img src="arrow.png" border="1" /></a></div>
    <div>3) Img border 0: 
      <a href="#">UP &nbsp;;<img src="arrow.png" border="0" /></a></div>
    <div>4) A style border none: 
      <a href="#" style="border:none">UP &nbsp;;<img src="arrow.png" /></a></div>
    <div>5) Img style border none: 
      <a href="#" >UP &nbsp;;<img src="arrow.png" style="border:none" /></a></div>
    <div class="rion">6) Stylesheet a img style border none: 
      <a href="#" >UP &nbsp;;<img src="arrow.png" /></a></div>

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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download