Css content(Images) added in a mail Html file is not displaying images -


i have div classes mail in css of mail. when open mail in outlook or in gmail not able view images. when open mail in browser displays images fine...

attached email's content

    <!--ctype html public "-//w3c//dtd html 4.01 transitional//en"  "http://www.w3.org/tr/html4/loose.dt--><!--ctype html public "-//w3c//dtd xhtml  1.0 transitional//en"      "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dt--> <!doctype html public "-//w3c//dtd html 4.01 transitional//en">  <html> <head>      <style type="text/css"> .logo_print {        background-image:url("http://www.websitename.com//en-ca/images/logo_print.jpg");     width:105px;height:79px; } .icon_shipped {       background:url("http://www.websitename.com//en-ca/images/icon_shipped.jpg");widt     h:14px;height:14px; } .icon_not_shipped {        background:url("http://www.websitename.com//en-ca/images/icon_not_shipped.jpg");     width:16px;height:15px; } .the_email_top      {width:560px;height:93px;background-image:url("http://www.websitename.com//en-ca     /images/top.jpg")}     </style>      <title></title> </head>  <body>     <table border="0" cellspacing="0" cellpadding="0" align="center">         <tbody>             <tr valign="top">                 <td colspan="3">                     <div class="the_email_top">                 </td>             </tr>              <tr valign="top">                 <td width="10">&nbsp;</td>                  <td width="540">                     <div style="width: 10px; height: 12px; overflow: hidden;"></div>                      <h1 style="margin: 0px; padding: 0px; font-family: arial, helvetica, sans-serif; font-size: 16px; color: #212121; font-weight: bold;">password reset</h1>                      <div style="width: 10px; height: 16px; overflow: hidden;"></div>                      <p><span style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #555555;">dear customer,</span></p>                      <p><span style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #555555;">to reset password, either click link below or copy , paste browser.</span><br>                     <span style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br>                     <a href="http://www.websitename.com/en-ca/useraccount/resetpassword?nirvanatoken=01d4lkn1%2bts5g94oehejer3ibovthrwhnu6sfmjscu5lmpnsjn5c6xx5s8rroq0p%0d%0a">use link.</a><br>                     <span style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br>                     <span style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #555555;">please not reply email.</span></p>                      <p><span style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #555555;">sincerely,</span></p>                      <p><span style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #555555;">your web site hosting support team</span></p>                      <div style="width: 10px; height: 60px; overflow: hidden;"></div>                 </td>                  <td width="10">&nbsp;</td>             </tr>              <tr valign="top">                 <td colspan="3" bgcolor="#f2f2f2">                     <div style="width: 10px; height: 10px; overflow: hidden;"></div><span style="margin-left: 10px; font-family: arial, helvetica, sans-serif; font-size: 11px; color: #999999;">&copy; 2011 deluxe enterprise operations. rights reserved.</span>                      <div style="width: 10px; height: 55px; overflow: hidden;"></div>                 </td>             </tr>         </tbody>     </table> </body> </html> 

most e-mail programs block images default - you'll see "click here enable images xxx domain" message when you're testing e-mail in actual clients (they prevent tracking, guess - not sure why it's common). browsers, however, have no such qualms, images show fine.

if want images show in e-mail clients, you're going have hope users allow them. maybe will, don't count on - should build e-mail looks fine without images.

hope helps (and sorry non-answer, that's how e-mail clients are)!


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -