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

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098