Design Test Problem

Im trying to create a campaign and have just ran the design and spam tests.
I sent myself a copy of the email first. This came through to my gmail account and look as it should - http://www.cultivatecreative.co.uk/campaign/mygmail.png

However the screenshots generated by the design test look like this http://www.cultivatecreative.co.uk/campaign/gmail.png

The majority of users receiving this will probably be using Outlook 2007, which looks similar in the design test http://www.cultivatecreative.co.uk/campaign/outlook2007.png

Which version should i believe? I can see no reason for the main body of the email to be appearing so out of place.

Thanks

Dave Dave, 7 years ago

Hey Paul, thanks for sharing the screens. Here's the problem... they're both right. Unfortunately, Gmail applies different rendering rules based on the web browser the email is viewed in. While it might look great in Safari for example, it could still be broken in Firefox. It's super frustrating.

I can't see you're code so can't offer a solution, but it looks like you might be using float. Try coding this part of your email as a table, then test again and see if it fixes the problem. To save the $5 for running another test, just test your Gmail account in multiple browsers and see how you go.

paulburrows, 7 years ago

Would a copy of the code help?

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Conren News</title>
   <style type="text/css" media="screen">
      body {
         margin: 0;
         padding: 0;
         background-color: #ffffff;
      }

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

      td.permission p {
         font-family: 'Arial', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
         margin: 0 0 5px 0;
      }

      td.permission p a {
         font-family: 'Arial', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #103174;
      }

      td.header {
         background-image: url('header.jpg');
         background-repeat: no-repeat;
         background-position: top center;
         background-color: #fffff;
         height: 130px;
      }

      td.header h1 {
         font-family: 'Arial', sans-serif;
         font-size: 30px;
         font-weight: normal;
         color: #333333;
         margin-left: 50px;
         margin-bottom: 24px;
      }

      table.content {
         background-color: #f5f5f5;
      }

      td.sidebar a {
         font-family: 'Arial', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #103174;
         text-decoration: none;
      }
      
      td.sidebar a.web {
           color:#103174;
           font-weight: bold;
           font-size: 16px;
      }

      td.sidebar h3 {
         font-family: 'Arial', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #333333;
         margin: 10px 0 14px 0;
         padding: 0;
      }

      td.sidebar h3.buttons {
         font-family: 'Arial', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #333333;
         margin: 0 0 4px 0;
         padding: 0;
      }

      td.sidebar h4 {
         font-family: 'Arial', sans-serif;
         font-size: 13px;
         font-weight: bold;
         color: #333333;
         margin: 0 0 2px 0;
         padding: 0;
      }

      td.sidebar p {
         font-family: 'Arial', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #505050;
         margin: 0 0 13px 0;
         padding: 0;
      }
      
       td.sidebar p.further {
         font-family: 'Arial', sans-serif;
         font-size: 13px;
         font-weight: normal;
         color: #505050;
         margin: 0 0 13px 0;
         padding: 0;
      }
      
      td.sidebar p.further a {
          font-size: 13px;      
      }

      td.sidebar p.buttons {
         font-family: 'Arial', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #505050;
         margin: 0 0 4px 0;
         padding: 0;
      }

      td.mainbar a {
         font-family: 'Arial', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #103174;
         text-decoration: none;
      }

      td.mainbar h2 {
         font-family: 'Arial', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #103174;
         margin: 0 0 10px 0;
         padding: 0;
      }
      
      td.mainbar h2.sub {
         font-family: 'Arial', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #103174;
         margin: 0 0 10px 0;
         padding: 0;
         text-decoration: underline;
      }

      td.mainbar h3 {
         font-family: 'Arial', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 20px 0;
         padding: 0;
      }

      td.mainbar p {
         font-family: 'Arial', sans-serif;;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 16px 0;
         padding: 0;
      }
      
      td.mainbar img {
          margin-bottom: 8px;
      }

      td.footer {
         padding: 0 10px 20px 10px;
      }

      td.footer p {
         font-family: 'Arial', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
         margin-top: 15px;
      }
      
      td.footer p.baseline {
         font-family: 'Arial', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
         margin: 20px 10px 0 10px;
      }
   </style>
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center">
         
         <table width="580" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td class="permission" align="center">
                  <p>You are receiving this email as Conren would like to take this opportunity to share <br />information within the VINCI Group of Companies.</p><p>However, if you do not wish to receive any further Newsletters please <unsubscribe>unsubscribe here</unsubscribe>.</p>
               </td>
            </tr>
            <tr>
               <td class="header" align="left" valign="bottom">
                  <img src="header.jpg" alt="Conren News" width="580" height="350" />
               </td>
            </tr>
            <tr>
               <td>
                  <table width="580" border="0" cellspacing="16" cellpadding="0" class="content">
                     <tr>
                        <td class="mainbar" align="left" valign="top" width="354">
                           <h3><$currentdayname$> <$currentmonthname$> <$currentday$>, <$currentyear$></h3>
                           
                           <repeater toc='false'>
                              <h2><$title link='true' default='Enter your title'$></h2>
                              <$description default='<p>Enter your description</p>'$>
                           </repeater>
                           
                           <repeater toc='true'>
                              <h2 class="sub"><$title link='true' default='Enter your title'$></h2>
                              <img src="<$imagesrc link='true'$>" alt="Inline Image" width="300" height="150" align="left" />
                              <$description default='<p>Enter your description</p>'$>
                           </repeater>
                           
                        </td>
                        <td class="border" width="2">&nbsp;</td>
                        <td class="sidebar" align="left" valign="top" width="192">
                           <h3>Further Information</h3>
                           <p class="further">To find out all the latest Conren news, please visit our <a href="http://www.conren.com" title="www.conren.com">website</a> or take a look at our section on the VINCI Group Intranet.</p>
                           <img src="hr-small.gif" alt="Small hr" width="192" height="28" />
                           
                           <h3 class="buttons">Forward</h3>
                           <p class="buttons">Know someone who might be interested in the email? <forwardtoafriend>Forward this email to a friend</forwardtoafriend>.</p>
                           <img src="hr-small.gif" alt="Small hr" width="192" height="28" />
                           
                           <h3 class="buttons">Unsubscribe</h3>
                           <p class="buttons">If you no longer wish to receive this email <unsubscribe>please unsubscribe</unsubscribe>.</p>
                           
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
         <table width="646" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><img src="footer-tail.jpg" alt="Footer" width="646" height="87" /></td>
            </tr>
            <tr>
               <td align="center" class="footer">
               <img src="footer-logo.jpg" width="160" height="50" alt="Conren Limited" align="left">
               <p>Conren Limited, Redwither Road, Wrexham Industrial Estate, Wrexham LL13 9RD UK <br />
                  Tel: +44 (0) 1978 661991 / Fax: +44 (0) 1978 661120 / Email: info@conren.com</p>
                  
               <p class="baseline">Anti-slip Coatings & Screeds, Anti-Static Flooring, BBA Approved Anti-Skid for Roads, <br /> Car Park Systems, Play Surfacing, Waterproofing</p></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</body>
</html>
paulburrows, 7 years ago

removing align="left" from:

<img src="<$imagesrc link='true'$>" alt="Inline Image" width="300" height="150" align="left" />

seems to have fixed it, and ive still got a bit of hair left!!

Mathew Mathew, 7 years ago

Thanks for posting that update Paul, hopefully it will help prevent baldness in some other people ;)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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