Why does my email template appear differently in various email programs?
Jan 31, 2013 11:40 AM
Tags: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=55 e51819e92ef317c357" 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=dc 5c279154096ce1f361" 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=93 65342d3d72baf4c0d2" 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=4f 1b836f6412ab952e34" 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=3c 7664689336406c15ee" 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=a2 27a48f3b29b0a38f7a" 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=c9 4240f73ea2a1647745" 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=57 42c12d94b5c490d535" 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=3e 0b5322e37bf2b86796" 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=24f ddfba2d9dd33cb960" width="151" height="144" align="left" border="0" /><a/><br /><font size="4"><b>Fluoron<sup>®</sup> 5 ml</b></font><br /><em>Compare to Fluress<sup>®</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=bff 0adfc33d25c58f9a2" width="162" height="144" align="left" border="0" /></a><br /><font size="4"><b>Fluorocaine™ 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=b9c 0ceeda9e5db57fbfd" 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>®</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=3b e84121296356649aa6" 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>®</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=e22 93736ebaa71f5455b" 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>®</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:
