design not displaying correctly

I've created an html email and whilst it displays fine in a browser or in Apple Mail, it completely messes up in Gmail and Yahoo. If someone could get back to me I'd be happy to send a screen grab or even the code. This campaign needs to go out today so I'd really appreciate someone getting back to me asap.
Thanks!

mcotchin, 7 years ago

Hi, post up your code and, if possible a screengrab, and I'm sure someone can help out.

Mike

Appleby-Bowers, 7 years ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Happy Christmas from N&amp;W</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
td img {display: block;}.style1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    font-size: 13px;
}
.box1 {
    padding-left: 23px;
    font-weight: normal;
    vertical-align: middle;
}
.style2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #E23840;
    font-size: 18px;
}
.style3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
}
.enviro {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
}
.box2 {
    font-weight: normal;
    vertical-align: middle;
}
p {
    margin-top: 14px;
    margin-bottom: 14px;
}
.footerLeft {
    border-bottom-color: #000000;
    border-left-color: #000000;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: solid;
}
.style4 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #000000;
    font-size: 12px;
}
.footerRight {
    border-bottom-color: #000000;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-color: #000000;
}
.columnLeft {    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #000000;
    text-align: left;
}
.columnRight {    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #000000;
    text-align: right;
}
a {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 10px;
    color: #000000;
    font-weight: bold;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
.style6 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    text-align: left;
}
.style7 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10px;
}
</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Wed Dec 09 08:41:21 GMT+0000 (GMT) 2009-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="600" height="545">
<!-- fwtable fwsrc="nw_xmas.png" fwpage="Page 1" fwbase="nw_xmas.gif" fwstyle="Dreamweaver" fwdocid = "1038057351" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="111" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="230" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="61" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="80" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="118" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td height="25" width="600" colspan="5"><span class="style6">Having trouble viewing this email?
     <webversion>View it in your browser </webversion>

BThies BThies, 7 years ago

Try this:

<!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">
td img {display: block;}
.style1 {
    font-family: Georgia, Times New Roman, Times, serif;
    color: #FFFFFF;
    font-size: 13px;
}
.style2 {
    font-family: Georgia, Times New Roman, Times, serif;
    color: #E23840;
    font-size: 18px;
}
.style3 {
    font-family: Georgia, Times New Roman, Times, serif;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
}
.enviro {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
}
.box2 {
    font-weight: normal;
    vertical-align: middle;
}
.style4 {
    font-family: Georgia, Times New Roman, Times, serif;
    color: #000000;
    font-size: 12px;
}

.columnLeft {    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #000000;
    text-align: left;
}
.columnRight {    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #000000;
    text-align: right;
}
a {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 10px;
    color: #000000;
    font-weight: bold;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
.style6 {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    text-align: left;
}
.style7 {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 10px;
}
</style>
</head>

<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
    <tr>
        <td valign="middle">
            <div style="font-size:8px;">&nbsp;</div>
            <span class="style6">Having trouble viewing this email? <webversion>View it in your browser </webversion> &nbsp; | &nbsp; <unsubscribe> Unsubscribe</unsubscribe></span>
            <div style="font-size:8px;">&nbsp;</div>
        </td>
    </tr>
    <tr>
        <td><table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <td width="23" bgcolor="#000000">&nbsp;</td>
            <td width="318" bgcolor="#000000" valign="middle">
                <div align="left" class="style1">It seems so right at Christmas time<br />
                  To send our customers a rhyme<br />
                  And bring a little yuletide cheer<br />
                  To mark the passing of a year<br />
                  That’s been as hard as hard can be<br />
                  So as we deck the Christmas tree<br />
                  And carve the bird on Christmas morn<br />
                  We’ll think 'thank Gawd the old year's gorn'<br />
                  And since our order book is full<br />
                  We see ourselves as capable<br />
                  Of magic things in two-oh ten<br />
                  So peace on earth, goodwill to men&hellip;*<br />
                  <br />
                  *And women, obviously. But that didn't scan.</div>
            </td>
            <td width="259" bgcolor="#000000"><img name="bauble1" src="images/bauble1.jpg" width="259" height="275" border="0" id="bauble1" style="display:block;" alt="" /></td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td><table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="111" bgcolor="#000000"><a href="http://www.nwglobalvending.co.uk/" target="_blank"><img name="logo" src="images/logo.jpg" width="111" height="175" border="0" id="logo" style="display:block;" alt="" /></a></td>
            <td width="291" bgcolor="#000000" valign="middle"><div class="style2">Here's to a Happy Christmas and<br />
      a prosperous New Year.<br />
      Goodness knows you deserve it.</div>
      <div style="font-size:14px;">&nbsp;</div>
        <div class="style3">From all of us at N&amp;W</div>
        <div style="font-size:14px;">&nbsp;</div>
      <div class="enviro">For the sake of the environment and for the sake of ACORNS<br />
        we are sending our Christmas greetings by HTML.</div></td>
            <td width="198" bgcolor="#000000"><img name="bauble2" src="images/bauble2.jpg" width="198" height="175" border="0" id="bauble2" style="display:block;" alt="" /></td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td><table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; border-left:1px solid #000000; border-right:1px solid #000000; border-bottom:1px solid #000000;">
          <tr>
            <td valign="middle" width="481"><div align="right" class="style4">N&W is proud to support Acorns Children's Hospice&nbsp;</div></td>
            <td width="117"><a href="http://www.acorns.org.uk/" target="_blank"><img name="acorns_logo" src="images/acorns_logo.jpg" width="117" height="45" border="0" id="acorns_logo" style="display:block;" alt="" /></a></td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td>
            <div align="left" class="style7">Designed and produced by <a href="http://www.applebybowers.com" target="_blank">www.applebybowers.com</a></div>
            <div style="font-size:14px;">&nbsp;</div>
            <div style="font-size:14px;">&nbsp;</div>            
        </td>
    </tr>                
</table>

</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
jmp909, 7 years ago

my standard response to anyone having formatting issues is... don't use styles!! or p tags... use font tags and <br>... see my post here http://www.campaignmonitor.com/forums/viewtopic.php?id=3057

do note this is my personal preference, as a result of my own building and testing. you will find differing opinions here about compatibility and tables/fonts vs divs/css in emails, depending on what your target audience is.

also .. you don't really want to have this character in html code:

We’ll

it should be &apos; or just a simple ' character

j

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098