Email looks different when editing and previewing and after being sent

Hi guys, i'm a newbie at html and coding... hope u guys can help me out here... the problem i have is that I've specified a description with css styles to be in a certain font and size... and after i've imported my html and while editing it all looks fine... but if i preview it on cm and also when i send a test email the description somehow automatically turn into the default white...

here's a snap of what i'm talking about...
http://i279.photobucket.com/albums/kk152/eleking/Picture-1.jpg

i don't really know what's goin on... here's a bit of the code for the description:

             <td height="515" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="left" class="mainbar"><span class="style1"><$description default='<p>Enter your description</p>'$></span>
                        <p class="top">
                        <repeater toc='true'>
                        <table width="600" border="0" cellspacing="10" cellpadding="0" class="post2">
                            <tr>
                              <td class="body"><p><img src="<$imagesrc link='true'$>" width="3

and here's the style code:
   .style1 {
          font-family: Georgia;
          font-size: 18px;
          font-weight: normal;
    }

thanks in advance for any help, cheers!

laurenraw laurenraw, 7 years ago

can you send the full code for your email?  the error may not be happening where you think it is :)


Lauren | Pinpoint-360.com
jubei, 7 years ago

sorry for the late reply... ok here it is:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Template 4 - Left Sidebar</title>
   <style type="text/css" media="screen">
      body {
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
    background-image: url();
      }

      p a {
          color: #cc6600;
          text-decoration: none;
      }

      td.permission {
          padding: 8px 0 8px 0;
      }

      td.date {
          padding: 0 0 4px 0;
      }

      td.permission p {
          font-family: Georgia;
          font-size: 11px;
          font-weight: normal;
          font-style: italic;
          color: #151515;
          text-align: center;
      }

      td.permission a {
          color: #9f9862;
          text-decoration: none;
      }

      table.bgTop {
      }

      table.bg {
      }

      table.header td {
          font-family: Georgia;
          font-size: 14px;
          font-weight: normal;
          color: #000000;      }

      table.header td h1 {
          font-family: 'Futura', Arial;
          font-size: 24px;
          font-weight: normal;
          color: #9f9862;
          display: inline;
          margin: 0 0 0 6px;
          padding: 0;
          text-transform: uppercase;
      }

      table.header td h3 {
          font-family: Georgia, Arial;
          font-size: 12px;
          font-weight: normal;
          font-style: italic;

          display: inline;
          margin: 0;
          padding: 0 0 6px 0;
      }

      date {
          font-family: Georgia;
          font-size: 16px;
          font-weight: normal;
          color: #000000;
      }

      td.sidebar {
          background-color: #f8f8f8;
          border-right: 1px solid #bdbcb8;
      }

      td.sidebar h2 {
          font-family: Georgia;
          font-size: 16px;
          font-weight: normal;
          color: #000000;
          margin: 0 0 10px 0;
          border-bottom: 3px solid #464646;
          text-transform: uppercase;
      }

      td.sidebar ul {
          margin: 0 0 20px 24px;
          padding: 0;
          font-family: Georgia;
          font-size: 12px;
          font-weight: normal;
          color: #313131;
      }

      td.sidebar ul a {
          font-family: Georgia;
          font-size: 12px;
          font-weight: normal;
          color: #44a0df;
      }

      td.sidebar p {
          font-family: Georgia;
          font-size: 12px;
          font-weight: normal;
          color: #313131;
          margin: 0 0 14px 0;
          padding: 0;
      }

      td.sidespace {
         padding: 20px;
      }

      table.options {
      }

      table.options td {
      }

      td.border {
          border-bottom: 1px solid #;
      }

      table.options h3 {
          font-family: Georgia;
          font-size: 16px;
          font-weight: normal;
          margin: 0;
          padding: 0;
      }

      table.options p {
          font-family: Georgia;
          font-size: 13px;
          font-weight: normal;
          color: #313131;
          margin: 0;
          padding: 0;
      }

      table.options p a {
          color: #313131;
          text-decoration: none;
          border: none;
          margin: 0;
          padding: 0;
      }
      
      table.post {
         background-repeat: repeat-x;
         background-position: bottom left;
         background-color: #333333;
      }   
      
      table.post2 {
         background-repeat: repeat-x;
         background-position: bottom left;
         background-color: #4F2E39;
      }            

      td.mainbar {
         padding: 20px;
      }

      td.mainbar h2 {
          font-family: Georgia;
          font-size: 18px;
          font-weight: normal;
          color: #ffffff;
          margin: 0 0 10px 0;
          padding: 0;
      }
      
      td.mainbar h4 {
          font-family: Georgia;
          font-size: 18px;
          font-weight: normal;
          color: #000000;
          margin: 0 0 10px 0;
          padding: 0;
      }
      
      td.header date {
          font-family: Georgia;
          font-size: 12px;
          font-weight: normal;
          color: #000000;
          margin: 0 0 10px 0;
          padding: 0;
      }

      td.mainbar h2 a {
          font-family: Georgia;
          font-size: 20px;
          font-weight: bold;
          color: #fffffff;
         text-decoration: none;
      }

      td.mainbar h3 {
          font-family: Verdana;
          font-size: 11px;
          font-weight: normal;
          text-transform: uppercase;
          margin: 0 0 8px 0;
          padding: 0;
      }

      td.mainbar p {
          font-family: Georgia;
          font-size: 12px;
          font-weight: normal;
          color: #ffffff;
          margin: 0 0 16px 0;
          padding: 0;
      }

      td.mainbar p.top {
          font-family: Verdana;
          font-size: 10px;
          font-weight: normal;
          color: #44a0df;
          text-transform: uppercase;
          width: 100%;
          text-align: right;
          margin: 14px 0 4px 0;
      }

      table.footer {
          font-family: Georgia;
          font-size: 11px;
          font-weight: normal;
          color: #333333;
          text-align: center;
      }

      table.footer td {
          height: 88px;
      }

      table.footer span {
          color: #ffffff;
      }

      table.bgBottom {
         padding: 0px;
      }
   .style1 {
          font-family: Georgia;
          font-size: 18px;
          font-weight: normal;
    }
   table.post {         
         background-repeat: repeat-x;
         background-position: bottom left;

}
   .style2 {
   
       background-color: #f8f8f8;
   
   
   #}
   </style>
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center"><table width="800" border="0" bgcolor="#D1D3D4" class="bg">
<tr>               
          <td width="325" align="center" valign="top"><table width="800" height="183" border="0" cellspacing="0" cellpadding="0" class="header">
            <tr>
              <td height="183"><p><img src="pics/mast.gif" width="516" height="190" alt="Mezze" /><span class="header"><$currentday$> <$currentmonthname$>, <$currentyear$></span></p>
                </td>
            </tr>
          </table>
            <img src="pics/separator.gif" alt="separator" width="600" height="4">
            <table width="600" border="0" background="pics/bg_trans.gif">
              <tr>
                <td height="515" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="left" class="mainbar"><span class="style1"><$description default='<p>Enter your description</p>'$></span>
                        <p class="top">
                        <repeater toc='true'>
                        <table width="600" border="0" cellspacing="10" cellpadding="0" class="post2">
                            <tr>
                              <td class="body"><p><img src="<$imagesrc link='true'$>" width="300" height="150" hspace="5" vspace="5" border="0" align="right" class="inline" /> </p>
                                <h2><$title link='true' default='Enter Title Here'$></h2>
                                <$description default='<p>Enter your description</p>'$></td>
                            </tr>
                          </table>
                        <br>
                        </repeater>
                        <repeater>
                          <table width="600" border="0" cellspacing="10" cellpadding="0" class="post">
                            <tr>
                              <td class="body"><p><img src="<$imagesrc link='true'$>" width="300" height="150" hspace="5" vspace="5" border="0" align="right" class="inline" /></p>
                                <h2><$title link='true' default='Enter Title Here'$></h2>
                                <$description default='<p>Enter your description</p>'$></td>
                            </tr>
                          </table>
                        <br>
                      </repeater></td></tr></table></td></tr></table>
            <table width="600" border="0" cellspacing="20" class="options">
              <tr>
                <td width="200" align="center" valign="top"><h3>MAKE A RESERVATION</h3>
                  <p>&nbsp;</p>
                  <p> Call us or email us to book a reservation at:<br>
                      <a href="mailto:perin@mezze.my">email / perin@mezze.my</a><br>
                    tel /603 2095 0122 <br>
  <img src="pics/arrow.gif" alt="Make a Reservation" width="21" height="36"></p></td>
                <td width="200" align="center" valign="top"><h3>FORWARD TO A FRIEND</h3>
                  <p>&nbsp;</p>
                  <p>
                    <forwardtoafriend>Think a friend might be <br>
                      interested in this? <br>
                      Click to forward this  to a friend</forwardtoafriend>
                    <br>
                  <img src="pics/arrow.gif" alt="Forward to a friend" width="21" height="36"></p></td>
                <td width="200" align="center" valign="top"><h3>OPENING <br>
                  HOURS</h3>
                  <p>&nbsp;</p>
                  <p> Tuesday-Saturday<br>
                  12-3pm / 5-11pm<br>
                  Sunday 10am-3pm<br>
                  Closed on Mondays<br>
                  </p>
                  <p><img src="pics/arrow.gif" alt="Opening Hours" width="21" height="36"></p>
                </td>
              </tr></table>
<br>
            <img src="pics/separator.gif" alt="separator" width="600" height="4">
            <table width="559" height="88" border="0" cellpadding="0" cellspacing="0" class="footer">
              <tr>
                <td align="center"><p>Mezze and the Mezze Logo are registered trademarks of Cucina Sdn Bhd.<br />
                  Mezze - No 132, Jalan Kasah, Medan Damansara, 50490 Kuala Lumpur Malaysia. Tel +603 2095 0122</p>
                    <p>You're receiving this newsletter because you joined the Mezze Newsletter.</p>
                  <p>Not interested anymore?
                    <unsubscribe>Unsubscribe</unsubscribe>
                    . Having trouble viewing this email?
                    <webversion>View it in your browser</webversion>
                    .</p></td>
              </tr>
            </table>
          <p>&nbsp;</p></td>
</tr></table>
         
    <span class="style2"></span>
    <p>&nbsp;</p>
      <p>&nbsp;</p></td>
   </tr>
</table>

</body>
</html>

BThies BThies, 7 years ago

Several things:

- At 800px it's quite wide for an e-mail; should be around 600-650px max to prevent horizontal scrolling.
- There are a number of properties that are not compatible with major e-mail clients, and the document will not display correctly
- in your CSS, "td.mainbar h2 a" has the color set to #FFFFFFF - one too many F's
- in your CSS, "td.border" has no color set
- There's an extra "#" at the end of your CSS in the ".style2"

Please feel free to contact me directly if you need assistance in getting everything fixed up.


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

hi brian, thanks for replying... i fixed all the issues u pointed out, but the same problem with my top description still persists... might it be a problem with the code in my "style 1" css?... i've email u directly as well just in case... thanks!

BThies BThies, 7 years ago

Your CSS is currently setup to assign the color:#FFFFFF property to any <p> tags within the "td.mainbar p" class.

Campaign Monitor uses <p> tags within <$description$> tags, and this is overriding the "style1" span tag.

You'll need to remove the color property from the "td.mainbar p" class, and create classes with more of a direct influence over specific text elements.


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

awesome!... fixed it, everythin's hunkydory now!... thanks a bunch brian!... :)

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