HTML email displaying inconsistantly in GMAIL and Outlook

Hi,

I’m new to this forum. I have an HTML email that I did in Dreamweaver and imported into my email provider software. When I test it, it looks fine in Outlook, but horrible in GMAIL. Seems like it lost all its ‘styles’ in GMAIL.

At risk of pasting too much…Here is the code. Can anyone help??


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.links {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: uppercase;
    color: #FFF;
    padding-right: 10px;
    text-align: right;
    top: 40px;
}
a:link {
    text-decoration: none;
    color: #FFF;
}
a:visited {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: underline;
    color: #CC6;
}
a:active {
    text-decoration: none;
    color: #CC6;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
    top: 40px;
}
.Header {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #11275e;
    padding-left: 40px;
    padding-top: 7px;
    border-bottom-color: #666;
    border-top-width: thin;
    border-right-width: none;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #666;
    border-right-color: #666;
    border-left-color: #666;
    padding-right: 40px;
    padding-bottom: 15px;
}
.bodycopy {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #333;
    padding-top: 5px;
    border-bottom-color: #666;
    border-color: #666;
    padding-right: 0px;
    padding-left: 0px;
    text-align: left;
}
.ContactUs {
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 20px;
    float: left;
    padding-top: 0px;
}
.ImageBox {
    border: thin solid #666;
}
.logocell {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
}
.rightnavbox {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
}
.contactusbox {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: none;
}
.borderforcontactus {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
}
.contactusbox {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-bottom-style: solid;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.ContactRoland {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    color: #714032;
    padding-top: 20px;
}
.readyformovein {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    color: #FFF;
    padding-left: 20px;
    border-top-color: #666;
    border-bottom-color: #666;
}
.rolanddre {
    font-size: 9px;
    color: #998266;
}
.photoboxes {
    padding-left: 20px;
    padding-right: 20px;
}
.contactusbox .ContactRoland {
    padding-left: 0px;
    color: #11275e;
    padding-top: 20px;
    padding-right: 40px;
}
contactbox {
    padding-left: 20px;
}
.Price {    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    color: #306;
    font-variant: normal;
}
.Price {
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    padding-right: 0px;
    text-indent: 0px;
    vertical-align: text-top;
}
.bodytext {    font-size: 9px;
}
.bodytext {    font-size: 9px;
    line-height: 12px;
    text-align: left;
}
.bodytext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    vertical-align: text-top;
    color: #000;
    text-indent: 0;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
.listingtext {    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: 1.25&#37;;
    font-weight: normal;
    font-variant: normal;
    color: #333;
}
.listingtext {    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: 150%;
    font-weight: normal;
    font-variant: normal;
    color: #333;
}
.DowloadPriceSheet {
    color: #666;
}
.disclaimertext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #FFF;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    text-indent: 0;
    word-spacing: normal;
    white-space: normal;
}
.disclaimer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    color: #666;
    padding-top: 20px;
}
.disclaimerbox {
    padding-right: 20px;
    padding-left: 40px;
    padding-top: 5px;
    padding-bottom: 10px;
}
.photoboxes td {
    border: thin solid #666;
}
body.custom .entry-content td {
    border: none; }
.Bullets {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #11275e;
    padding-top: 15px;
    padding-left: 40px;
    padding-bottom: 15px;
}
.boldbodytext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bolder;
    color: #11275e;
}
-->
</style></head>

<body bgcolor="#beb18a">
<table width="641" border="1" align="center" cellpadding="0" cellspacing="0">
<tr style="border: thin solid #666; color: #D6D6D6;">
  <td width="641" align="right" bgcolor="#ffffff" border= "0"><table width="640" height="1000" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="44" colspan="6" align="right" valign="middle" bgcolor="#11275e" class="logocell"><span class="links"><img src="../WebImages/wlhlogo-11.png" alt="William Lyon Homes" width="214" height="63" border="0" align="left" usemap="#Map5" /></span>
        
        <span class="links"><br /> 
        <a href="http://bayarea.lyonhomes.com/">BAY AREA </a>I <a href="http://sacramento.lyonhomes.com/">SACRAMENTO</a> I <a href="http://laventura.lyonhomes.com/">LOS ANGELES</a> I <a href="http://orangecounty.lyonhomes.com/">ORANGE COUNTY</a></span></td>
      </tr>
    <tr>
      <td height="310" colspan="6" align="center" bgcolor="#FFFFFF"><img src="lyondelivers2-01.png" alt="Lyon Delivers" width="634" height="292" border="1" /></td>
    </tr>
    <tr>
      <td height="88" colspan="6" align="left" valign="top" bgcolor="#FFFFFF" class="Header"> Make a Move on a William Lyon Home<br />
        <span class="bodycopy">          And we'll move you out of your old one! Purchase a home now through February 15th and </span><span class="boldbodytext">we&#8217;ll pay for your moving expenses*</span><span class="bodycopy"> Just print out a copy of this email and bring it with you when you visit. For 50 years and counting, William Lyon Homes has delivered quality construction and exceptional customer service. <span class="boldbodytext">Now let us deliver on your $8,000 tax credit, with your moving expenses paid. </span></span></td>
    </tr>
    <tr class="contactusbox">
      <td height="24" colspan="2" align="left" valign="top" bgcolor="#ffffff" class="contactusbox" border= "0"><h3 class="ContactUs"><img src="../WebImages/contactus-02.png" alt="contact us" width="172" height="29" border="0" align="left" usemap="#Map" /></h3></td>
      <td height="24" colspan="4" align="left" valign="top" bgcolor="#ffffff" class="contactusbox"> <span class="ContactRoland"> Contact Roland Halim at (925)543-5574</span><br />
        </span><span class="bodycopy"><span class="rolanddre"> (DRE#01826012)</span> to set up an appointment to tour the model homes of your favorite community and to learn more about this wonderful opportunity!</span></td>
      </tr>
    <tr class="readyformovein">
      <td height="34" colspan="6" align="left" valign="top" bgcolor="#11275e" class="contactusbox" border= "0">Ready for Move-in Homes</td>
    </tr>
    <tr>
      <td width="83" height="101" align="center" bgcolor="#ffffff"><img src="clear-11.png" width="83" height="38" /></td>
      <td width="132" align="center" bgcolor="#ffffff" border="0"><img src="lot54-03.png" width="132" height="89" alt="Lot 54" /></td>
      <td width="132" align="center" bgcolor="#ffffff" border="0"><img src="lot55-03.png" width="132" height="89" alt="Lot 55" /></td>
      <td width="135" align="center" bgcolor="#ffffff"><img src="merlotmini-03.png" width="132" height="89" alt="Merlot Mini" /></td>
      <td width="132" height="101" align="center" bgcolor="#ffffff"><img src="chardonnaymini-03.png" width="126" height="89" alt="Lot 136" /></td>
      <td width="26" align="center" bgcolor="#ffffff">&nbsp;</td>
      </tr>
    <tr>
      <td height="35" bgcolor="#ffffff">&nbsp;</td>
      <td height="35" align="left" valign="top" bgcolor="#ffffff"><span class="Price">Lot #54</span><br />
        <span class="Price">LS#90076136</span><br />
        <span class="Price">1022 Silver Saddle Ln<br />
          Rocklin, CA<br />
          $429,792<br />
        </span><span class="bodytext">Plan: The Burberry<br />
          Approx. 3,469 sq. ft.<br />
          4 Bedrooms <br />
          3 1/2 Bathrooms<br />
          2-Car  Garage</span></p></td>
      <td height="35" align="left" valign="top" bgcolor="#ffffff"><span class="Price">Lot #55<br />
          MLS#90087726</span><br />
        <span class="Price">1024 Silver Saddle Ln Rocklin, CA <br />
$469,717<br />
        </span><span class="bodytext">Plan:  The Redbud<br />
Approx. 3,888 sq. ft.<br />
5 Bedrooms <br />4 1/2 Bathrooms<br />
2-Car  Garage<span class="listingtext"><a href="http://www.lyonhomeinspection.com/webimages/VineyardZinfandelLot118.pdf">l</a></span></span></td>
      <td height="35" align="left" valign="top" bgcolor="#ffffff"><span class="Price">Lot #119<br /> MLS#40436567</span><br />
        <span class="Price">2320 Maho Bay Circle Pittsburg, CA <br />
$413,990<br />
        </span><span class="bodytext">Plan:  The Merlot<br />
Approx. 2,623 sq. ft.<br />
3 Bedrooms <br /> 2 1/2 Bathrooms<br />
2-Car  Garage</span></td>
      <td height="35" align="left" valign="top" bgcolor="#ffffff"><span class="Price">Lot #136 <br />MLS#40436554</span><br />
        <span class="Price">2307  Maho Bay Circle Pittsburg, CA <br />
$429,990<br />
        </span><span class="bodytext">Plan:  The Chardonnay<br />
Approx. 2,789 sq. ft.<br />
5 Bedrooms<br /> 3 1/2 Bathrooms<br />
3-Car  Garage</span></td>
      <td height="35" bgcolor="#ffffff">&nbsp;</td>
    </tr>
    <tr>
      <td height="35" colspan="6" align="left" valign="top" bgcolor="#ffffff" class="disclaimerbox"><span class="disclaimer">*Must bring in copy of this email to receive offering. Prices, terms, conditions and availability subject to change without notice. Promotion value up to 2% of the net sales price. Applicable to all new home sales where contracts are entered into between January 13th and February 15th, 2010; excludes current homeowners or buyers in contract. Contact your local William Lyon Homes Sales Counselor for more details. William Lyon Homes (&quot;Lyon&quot;)*is offering   information on these tax credits for general awareness only, and has gathered   the tax credit information from public records and news reports.**Lyon is not responsible for any   inaccuracies.* Lyon is not responsible   for confirming whether Buyer will qualify for the*federal tax credit. This   information is not provided for the purpose of giving legal, accounting or tax   advice or consulting of any kind. Please consult with your tax professional,   accountant or attorney for complete details. Images of Lots 119 and 136 are model homes and not the actual homes for sale. </span></td>
    </tr>
    <tr>
      <td height="63" colspan="3" bgcolor="#11275e" class="disclaimertext"><p class="bodytext"><img src="wlhlogo-11.png" alt="Lyon logo" width="214" height="63" border="0" usemap="#Map4" href="http://www.lyonhomes.com" /></p></td>
      <td height="63" bgcolor="#11275e" class="disclaimertext">&nbsp;</td>
      <td height="63" align="right" bgcolor="#11275e" class="disclaimertext"><span class="bodytext"><img src="../WebImages/Twitter_32x32.png" alt="Twitter" width="32" height="32" border="0" align="right" usemap="#Map3" /><img src="../WebImages/FaceBook_32x32.png" alt="Facebook" width="32" height="32" border="0" align="right" usemap="#Map2" /></span></td>
      <td height="63" bgcolor="#11275e" class="disclaimertext">&nbsp;</td>
      </tr>
  </table>    <span class="links"><a href="http://bayarea.lyonhomes.com/" target="_top"></a></span></td>
</tr>
</table>

<map name="Map" id="Map">
  <area shape="rect" coords="3,2,170,27" />
</map>
<map name="Map">
</map>

<map name="Map2" id="Map2">
  <area shape="rect" coords="1,0,31,29" href="http://www.facebook.com/pages/William-Lyon-Homes-Northern-CA/183362365581" target="_top" />
</map>

<map name="Map3" id="Map3">
  <area shape="rect" coords="4,0,29,29" href="http://twitter.com/WilliamLyonHome" />
</map>

<map name="Map4" id="Map4">
  <area shape="rect" coords="1,2,210,60" href="http://www.lyonhomes.com" target="_top" />
</map>

<map name="Map5" id="Map5">
  <area shape="rect" coords="5,3,207,61" href="http://www.lyonhomes.com" target="_top" />
</map>
</body>
</html>

Unfortunately we have little control over what email clients will render and is a very sore point indeed.

The general consensus is to use tables to position all your content and avoid any css positioning at all. The css you do use should be as inline styles only because some email clients strip alll the head content anyway.

Here are some links that may help.

http://www.sitepoint.com/article/code-html-email-newsletters
http://www.xavierfrenette.com/articles/css-support-in-webmail/

You would be better off using some tried and tested email templates which you can find here:

http://www.campaignmonitor.com/templates/

This website may also be of use: http://www.email-standards.org/

It has a lot of information about the inconsistencies within e-mail standards for HTML, which clients support what technologies and to what extent. :slight_smile: