Skip navigation
ecc_ldillon
Currently Being Moderated

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

Jan 31, 2013 11:40 AM

Tags: #dreamweaver #cs6 #email_format

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>&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=bff 0adfc33d25c58f9a2" 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=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>&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=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>&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=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>&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

 
Replies
  • Currently Being Moderated
    Jan 31, 2013 11:45 AM   in reply to ecc_ldillon

    Gmail - You have styles in the head. Everything must be inline. Floats do not work.

     

    Outlook - Floats do not work.

     

    You should check the campaign monitor css guide because CSS for emails is a bad idea.  Everything should be tables for the greatest compatibility.  The reason why older versions of Outlook works is because it was based on the IE rendering engine where the newer versions are based on the Microsoft Word rendering engine.

     

    http://www.campaignmonitor.com/css/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2013 11:53 AM   in reply to ecc_ldillon

    If you are targeting a lot of mobile users you could do more with CSS for Android/iPhone, but that's about the most you can do.  There are tricks you can do or maybe just show effects to those.  There was a good case study from Panic who sells only Mac software and both Apple Mail and "i" devices support CSS3.  It's a good read to stay closer to the cutting edge.  And this article is from 3 years ago.

     

    http://www.campaignmonitor.com/blog/post/3116/what-you-can-learn-from- panics-email-marketing/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2013 2:46 PM   in reply to ecc_ldillon

    If email marketing is new to you, the below links are a good starting point for how to go about getting a good-looking and consistent design.

    http://kb.mailchimp.com/article/common-html-email-coding-mistakes

    http://24ways.org/2009/rock-solid-html-emails/

    http://htmlemailboilerplate.com/

     

    The boilerplate is good for reference but in my opinion is overkill for most email campaigns. It does a good job of highlighting why they do certain things though.

     

    Rik

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points