4 Replies Latest reply: Jan 31, 2013 2:46 PM by Rik Ramsay RSS

    Why does my email template appear differently in various email programs?

    ecc_ldillon Community Member

      I have created a CSS-style based email template using Dreamweaver CS6.  The template looks great within Dreamweaver, on Internet Explorer and in Outlook 2003.  However, when viewed in Outlook 2010, Hotmail and Gmail, the template is distorted.  If I set my containers using pixel size, why would it be different when viewed in other email programs?

       

      Here is my code:

       

      <style type="text/css">
      .pageborder {
      width: 795px;
      height: 995px;
      border: medium solid #008478;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 10pt;
      margin: 0 auto;
      }
      .prodboxleft {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 10pt;
      background-color: #76c6be;
      width: 370px;
      float: left;
      height: 164px;
      border: medium dashed #008478;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 12px;
      }
      .prodboxright {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 10pt;
      background-color: #76c6be;
      width: 370px;
      float: right;
      height: 164px;
      border: medium dashed #008478;
      margin-top: 5px;
      margin-right: 12px;
      margin-bottom: 5px;
      }
      .clearing {
      clear:both;
      display:block;
      visibility:hidden;
      }
      .pageborder .prodboxleft img {
      padding: 8px;
      }
      .pageborder .prodboxright a img {
      padding: 8px;
      }
      </style>
      </head>
      <body>
      <div class="pageborder"><br /><center><img src="https://system.netsuite.com/core/media/media.nl?id=12679&c=723462&h=55e51819e92ef317c357" width="720" height="86" border="0" /><br /><br />
        <a href="http://www.eyecareandcure.com/Diagnostic-Products"><img src="https://system.netsuite.com/core/media/media.nl?id=28469&c=723462&h=dc5c279154096ce1f361" width="195" height="40" border="0" /></a><a href="http://www.eyecareandcure.com/Pharmaceuticals"><img src="https://system.netsuite.com/core/media/media.nl?id=28474&c=723462&h=9365342d3d72baf4c0d2" width="195" height="40" border="0" /></a><a href="http://www.eyecareandcure.com/Exam-Room-Supplies"><img src="https://system.netsuite.com/core/media/media.nl?id=28470&c=723462&h=4f1b836f6412ab952e34" width="195" height="40" border="0" /></a><a href="http://www.eyecareandcure.com/Vision-Testing"><img src="https://system.netsuite.com/core/media/media.nl?id=28468&c=723462&h=3c7664689336406c15ee" width="195" height="40" border="0" /></a><br /><a href="http://www.eyecareandcure.com/Optical-Tools-Supplies"><img src="https://system.netsuite.com/core/media/media.nl?id=28473&c=723462&h=a227a48f3b29b0a38f7a" width="195" height="40" border="0" /></a><a href="http://www.eyecareandcure.com/Medical-Surgical-Supplies"><img src="https://system.netsuite.com/core/media/media.nl?id=28472&c=723462&h=c94240f73ea2a1647745" width="195" height="40" border="0" /></a><a href="http://www.eyecareandcure.com/Sterilizing-Disinfecting"><img src="https://system.netsuite.com/core/media/media.nl?id=28475&c=723462&h=5742c12d94b5c490d535" width="195" height="40" border="0" /></a><a href="http://www.eyecareandcure.com/Instruments"><img src="https://system.netsuite.com/core/media/media.nl?id=28471&c=723462&h=3e0b5322e37bf2b86796" width="195" height="40" border="0" /></a></center><br />
      <font size="5"><b><center>Great Prices and February Shipping Special!</center></b></font><br />
      <div class="prodboxleft"><a href="http://www.eyecareandcure.com/Drops/Fluoron-1532"><img src="https://system.netsuite.com/core/media/media.nl?id=1323&c=723462&h=24fddfba2d9dd33cb960" width="151" height="144" align="left" border="0" /><a/><br /><font size="4"><b>Fluoron<sup>&reg;</sup> 5 ml</b></font><br /><em>Compare to Fluress<sup>&reg;</sup></em><br /><font size="4"><b>$6.95</b></font><br />Was $8.90<br /><br />Item #1532</div>

      <div class="prodboxright"><a href="http://www.eyecareandcure.com/Drops/Fluorocaine-8482"><img src="https://system.netsuite.com/core/media/media.nl?id=1324&c=723462&h=bff0adfc33d25c58f9a2" width="162" height="144" align="left" border="0" /></a><br /><font size="4"><b>Fluorocaine&#8482; 5 ml</b></font><br /><br /><font size="4"><b>$7.30</b></font><br />Was $7.80<br /><br />Item #1533</div>

      <hr class="clearing" /><div class="prodboxleft"><a href="http://www.eyecareandcure.com/Drops/Tropicamide-1-0-15-ml_2"><img src="https://system.netsuite.com/core/media/media.nl?id=3992&c=723462&h=b9c0ceeda9e5db57fbfd" width="61" height="144" align="left" border="0" /></a><br />
        <font size="4"><b>Tropicamide 1.0% 15 ml</b></font><br />
        <em>Compare to Mydriacyl<sup>&reg;</sup></em><br />
        <font size="4"><b>$8.40</b></font><br />
        Was $10.80<br />
        <br />
        Item #1579</div>

      <div class="prodboxright"><a href="http://www.eyecareandcure.com/Drops/Tropicamide-0-5-15-ml"><img src="https://system.netsuite.com/core/media/media.nl?id=28676&c=723462&h=3be84121296356649aa6" width="57" height="144" align="left" border="0" /></a><br /><font size="4"><b>Tropicamide 0.5% 15 ml</b></font><br />
        <em>Compare to Mydriacyl<sup>&reg;</sup></em><br />
        <font size="4"><b>$8.20</b></font><br />
        Was $10.50<br />
        <br />
        Item #1586</div>

      <hr class="clearing" /><div class="prodboxleft"><a href="http://www.eyecareandcure.com/Drops/Phenylephrine-HCl-2-5-15-ml-Akorn-brand_2"><img src="https://system.netsuite.com/core/media/media.nl?id=9387&c=723462&h=e2293736ebaa71f5455b" width="53" height="144" align="left" border="0" /></a><br /><font size="4"><b>Phenylephrine 2.5% 15 ml</b></font><br />
        <em>Compare to Neo-Synephrine<sup>&reg;</sup></em><br />
        <font size="4"><b>$9.00</b></font><br />
        Was $10.25<br />
        <br />
        Item #1554</div>
       
      <div class="prodboxright"><center>
          <font size="4"><b>FEBRUARY SHIPPING SPECIAL!</b></font><br />www.eyecareandcure.com<br /><br /><font size="3"><b>Free Ground Shipping on all<br />internet orders over $200.00*</b></font><br />Enter Promo Code FEB13 during checkout<br /><br />
      <font size="1">*Valid only on orders placed on our website from<br />
      02/01/13-02/28/13. Not valid with any other promotional offer.</font>
      </center></div><hr class="clearing" />
      <center>To place your order, please visit our website at
      <a href="http://www.eyecareandcure.com"><font color="#008579">www.eyecareandcure.com</font></a>, or call Customer Service<br />
      at 1-800-486-6169.  You can also
      <a href="http://www.eyecareandcure.com/Monthly-Specials">
      <font color="#008579">download</font></a> a
      copy of this special and fax it to us at 1-877-321-1267.<br><br>Need access to our website? 
      <a href="http://www.eyecareandcure.com/Registration">
      <font color="#008579">Click here</font></a> to register.<br />24-7 ordering, special offers, order
      history and much, much more!<br /><br />
      <font size="1"><em>All prices subject to change.  Some additional restrictions may apply.<br />
      See <a href="http://www.eyecareandcure.com/Terms-Policies"><font color="#008579">www.eyecareandcure.com/Terms-Policies</font></a> for standard terms and conditions.</em></font>
      </center>
      </div>
      </div>
      </body>

       

       

      And here is a screen shot of the different results:

      Screenshots.jpg