Test emails all look fine everywhere "real" email looks off in Gmail

I recently did an email campaign in MailChimp and all of my test emails looked great in all email clients, including gmail (AND including a "real" send out I sent from my own test account as opposed to the client's account, not as a test if that makes any sense).

So bottom line, when I sent out the real email to the real list, the email that I got in Gmail had 2 paragraphs of text that had bizarre formatting. It was all supposed to be white and one line was purple, the rest was black, and the size was all off, larger.

I contacted MailChimp and they looked at the code and my screenshot and didn't have any idea what could have caused it. Does anyone have any idea at all? I'm pasting the code below... I've indicated with asterisks and all caps where the problem starts. Like I said, the text jumps up a couple of sizes and is in black and the first line of both of those paragraphs are actually purple! I don't know if it's a gmail thing or what, because my tests all look fine in gmail. THANK YOU!!

<!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>The Whistling Swan St. Patrick's Day Celebration</title>
</head>

<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><p style="font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif; font-size: 11px; color: #333333; padding: 0; margin: 5px 0 5px 0;"><a style="color:#333333;" href="*|ARCHIVE|*" target=� _blank� >View this email in a browser</a></p></td>
  </tr>
  <tr>
  <tr>
    <td align="center" bgcolor="#F6ECDC"><a href="http://www.thewhistlingswan.com" target="_blank"><img src="http://www.audreyburn.com/table3email/swan_logo.gif" alt="The Whistling Swan" border="0" /></a></td>
  </tr>
  <tr>
    <td align="left" bgcolor="#6d7c43"><img src="http://www.audreyburn.com/table3email/shamrock.gif" alt="Please join us for a" /></td>
  </tr>
  <tr>
    <td bgcolor="#6d7c43"><table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="68">&nbsp;</td>
    <td><p style="font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif; font-size: 30px; line-height: 16px; font-weight: bold; color: #FFFFFF; margin: 0; padding: 0;">St. Patrick’s Day Celebration</p>
   
      <p style="font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif; font-size: 14px; line-height: 14px; font-weight: bold; color: #FFFFFF; margin: 10px 0 0 0; padding: 0;">ON THURSDAY, MARCH 17</p>
     
     <p style="font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif; font-size: 14px; line-height: 24px; color: #FFFFFF; margin: 20px 20px 0 0; padding: 0;"> We will be serving a traditional corned beef and cabbage dinner with <br />
       all the trimmings from 11:30am on. There will also be entertainment <br />
       in the Ugly Duckling Loft. So wear your green and join us for a lively, <br />
       fun, and delicious St. Patrick’s Day at the iconic Whistling Swan and<br />
       Ugly Duckling Loft Restaurant.</p>
     
********THE PROBLEM STARTS HERE*********
    <p style="font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif; font-size: 14px; line-height: 24px; color: #FFFFFF; margin: 10px 20px 20px 0; padding: 0;">Make your reservations by calling us directly at 508-347-2321 or visit our <br />
      website at <a style="color:#FFFFFF;" href="http://www.thewhistlingswan.com" target="_blank">www.thewhistlingswan.com</a> and use our on-line OpenTable<span style="font-style=sup;">®</span> reservation service. We’re looking forward to seeing you there!</p>      </td>
  </tr>
</table></td>
  </tr>
  <tr>
    <td bgcolor="#F6ECDC">
    <table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="25"></td>
    <tr>
  <tr>
    <td width="68">&nbsp;</td>
    <td><p style="font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif; font-size: 11px; line-height: 16px; color: #333333; padding: 0; margin: 0;">The Whistling Swan and The Ugly Duckling Loft | Open Daily at 11:30am<br />502 Main Street | Sturbridge, MA 01566 | (508) 347-2321 | <a style="color: #333333;" href="http://www.thewhistlingswan.com" target="_blank">www.thewhistlingswan.com</a> | <a style="color: #333333;" href="*|UNSUB|*">Unsubscribe</a><br />
      To ensure these emails arrive in your inbox, please add <a style="color: #333333;" href="mailto:info@table3restaurantgroup.com" target="_blank">info@table3restaurantgroup.com</a> to your safe list. </p></td>
  </tr>
</table>    </td>
  </tr>
  <tr>
    <td align="center" bgcolor="#F6ECDC"><a href="http://www.table3restaurantgroup.com/" target="_blank"><img src="http://www.audreyburn.com/table3email/footer.gif" alt="A Table 3 Restaurant Group Property" border="0" /></a></td>
  </tr>
  <tr>
    <td bgcolor="#F6ECDC">&nbsp;</td>
  </tr>
</table>
</body>
</html>

JordanK, 5 years ago

Have you been able to determine if it's appearing improperly in all gmail accounts? Or was it just looking odd in one?

I did notice that

<span style="font-style=sup;">

should be

<span style="font-style:sup;">

Though there doesn't seem to be anything about that that would cause the errors you're describing.

aburn2006, 5 years ago

Unfortunately no, I don't know anyone on the list with a gmail account to ask. Do you happen to know if Gmail has started doing anything like Yahoo does, like highlighting addresses and phone numbers, etc? I thought maybe that was the case because of the content that was getting screwed up, but like I said, of the probably 10 tests (and one "real" send from my personal account), they ALL looked perfect. Soooo weird.

BThies BThies, 5 years ago

• Your first <a> tag is showing unknown characters around "_blank" instead of quotes. (see line 11)
• You have random and unclosed <tr>'s within the email  (see lines 13, 42, 44)
• <span style="font-style:sup"> is unsupported - you should be using <sup></sup> tags

Other best practices:
- Always declare <td> widths
- Only use top and bottom margin on <p> tags (for full consistency, top should be 0, and bottom can be set to any size)
- Some major email clients have minimum line heights based on font size
- Use nested tables rather than right or left margins on <p> tags
- Reg mark should be &reg;
- Apostrophes should be properly formatted


Brian Thies
Professional Email Developer
Thies Publishing
aburn2006, 5 years ago

Are any of those things that would cause the problem? Like I said, all of my other tests (and a send) directly from mailchimp looked fine in the same gmail account earlier. This is a screenshot of what happened...
http://www.audreyburn.com/table3email/screenshot.png


BThies :

• Your first <a> tag is showing unknown characters around "_blank" instead of quotes. (see line 11)
• You have random and unclosed <tr>'s within the email  (see lines 13, 42, 44)
• <span style="font-style:sup"> is unsupported - you should be using <sup></sup> tags

Other best practices:
- Always declare <td> widths
- Only use top and bottom margin on <p> tags (for full consistency, top should be 0, and bottom can be set to any size)
- Some major email clients have minimum line heights based on font size
- Use nested tables rather than right or left margins on <p> tags
- Reg mark should be &reg;
- Apostrophes should be properly formatted

BThies BThies, 5 years ago

Any of the first three bullets could be the reason, but I'd think the first two more than the third.

Some email clients are forgiving and will assume more than others, but those first items really need to be addressed to prevent display issues.


Brian Thies
Professional Email Developer
Thies Publishing
Stephen, 5 years ago

Hey aburn2006,

Thanks for your post and I've just had a look at your code myself however wasn't able to replicate the error in my Gmail account unfortunately, however I did just notice that it appears you've pasted in your Mail Chimp template code for us here, rather than the actual, rendered email code, is that right?

I only say this because it appears you have tags such as *|ARCHIVE|* and *|UNSUB|*, etc.

Could you perhaps click on the 'View this email in a browser' link within your received email, then view the source code of the campaign in your browser and paste that in for us here, so we can take a look please?

I suspect the issue may be the duplicate <tr><tr> tags on lines 13 and 14, and lines 45 and 46, but will need to double-check this.

Thanks again for your help.

aburn2006, 5 years ago

Thanks Stephen,

Here is the source code from viewing the email in browser (which also looks the way it should):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Whistling Swan St. Patrick's Day Celebration</title><meta property="og:title" content="The Whistling Swan St. Patrick's Day Celebration"/><meta property="fb:page_id" content="43929265776" />


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://us2.campaign-archive1.com/js/mailchimp/fancyzoom.mc.js"></script>
<script src="http://us2.campaign-archive1.com/js/mailchimp/likebutton.js"></script>
<script type="text/javascript">
    var likeButtonCount = 0;
   
    $(document).ready(function () {
        loadFbScript();
        var likeButtons = $('a[rel=fblikebtn]');
        likeButtonCount = likeButtons.length;
        likeButtons.each(function(i) {
            // the href for each like button has information on the specific element to like
            var href = $(this).attr('href');
            var params = getUrlParams(href);
            if (params['likeu']) {
                var divId = unescape(params['fblike']);
                $(this).attr('href', '#'+divId);
                addLikeButton(unescape(params['likeu']), unescape(params['liket']), divId);
            } else {
                $(this).attr('href', '#fbshare-campaign');
            }

            //now attach fancy zoom to it
            $(this).fancyZoom({"width":450, "height":150});

            if (i == likeButtonCount - 1) {
                window.likeButtonsReady();
            }
        });
                $('a[rel=fbcommentbtn]').each(function(i) {
            $(this).bind('click', function() {
                $('#fb-comments-notes').html('').hide();//clear out the notes when it's clicked
            });
            $(this).fancyZoom({"width":620, "height":450, "zoom_id":"zoom_comments", "persist":true, "firstTimeCallback": function() {
                $('#fb-comments-content').html('<iframe src="http://us2.admin.mailchimp.com/facebook/comments?u=2459504fea7fce4a4d370e604&id=87584d1b6d&e=d243b064c0" frameborder="0" align="bottom" height="450px" width="620px" onload="hideCommentsLoading()"></iframe>');
            }});
        });
            });

    window.likeButtonsReady = function() { };//callback in case anything needs to do something when all buttons are ready

    function getUrlParams(str) {
        var vars = [], hash;
        var hashes = str.slice(str.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
   
    function hideCommentsLoading() {
        $('#fb-comments-loading').hide();
    }

    window.fbAsyncInit = function() {
        // insert the loading img
        FB.init( { "appId" : '123400977701723', "status" : true, "cookie" : true, "xfbml" : true });
        FB.Event.subscribe('xfbml.render', function() {
            while ($('#fb-loading').length > 0) {// do this because the fancyzoom does non-fancy things and copies the innerHTML so there are two or more of evertyhing
                $('#fb-loading').remove();
            }
        });
        FB.Event.subscribe('edge.create', function(href, widget) {
            noteLikeEvent(href);
        });
    };

    function loadFbScript() {
        var fbscripty = document.createElement('script');
        fbscripty.type = 'text/javascript';
        fbscripty.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        fbscripty.async = true;
        $('#fb-root').append(fbscripty);
    };


    function showLikeElement(source) {
        $(source).trigger('click');
    }

    function isCampaignUrl(href) {
        var hostname = 'campaign-archive';
        return href.indexOf(hostname) != -1;
    }
   
    function noteLikeEvent(href) {
        if (isCampaignUrl(href)) {// only track the like stat when it's for this campaign
            $.get("http://us2.campaign-archive1.com/facebook/like?u=2459504fea7fce4a4d370e604&id=87584d1b6d&e=d243b064c0");
        }
    }
</script>
<style type="text/css">
    #fblike { min-width: 450px; max-width:450px; margin:-10px -10px 10px -10px; padding:10px; border-top:20px solid #3B5998; font-family:Helvetica,arial,sans-serif; text-align:center; }
    #fbcomment { min-width: 620px; max-width:620px; margin:-10px -10px 10px -10px; padding:10px; border-top:20px solid #3B5998; font-family:Helvetica,arial,sans-serif; text-align:center; }
    #fblike h2 { margin:15px 0; color:#3B5998; }
    .fb_edge_widget_with_comment { margin:10px 0 10px 10%; }
    .widget_button_count_left { background: transparent url(http://gallery.mailchimp.com/71d50e77a8332415a525fd8a3/images/comment_start.png) no-repeat 0px 0px; float: left; height: 15px; left: 2px; position: relative; top: 3px; width: 5px; z-index: 2; }
    .widget_button_count { color: #333; background-color: #FEFEFE; border-color: #C1C1C1; border-style: solid; border-width: 1px; float: left; font-weight: bold; height: 15px; margin-left: 1px; padding: 1px 3px; border-spacing: 0px 0px; border-collapse: collapse; font-size: 11px; text-align: left; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; }
    #fb-comments-notes { padding:10px; text-align: left;}

</style>
</head>

<body><div id="awesomebar" style="padding-bottom:40px;"><div style="position:absolute; top:0; left:0;"><table width="100%" style="position:fixed; clear:both; margin:0 !important; padding:0px !important; border-bottom:1px solid #fff !important; border-top: !important; background:url(http://gallery.mailchimp.com/e709a491029b04e745834d34d/images/awesomebar_bg.png) !important; -moz-box-shadow:0 1px 10px #333; box-shadow:0 1px 10px #333; -webkit-box-shadow:0 1px 10px #333; -op-box-shadow:0 3px 3px #666;" cellpadding="8" cellspacing="0"><tr>
    <td width="140" align="left" style="padding:8px !important;margin:0px !important;color:#111 !important;border:none !important;font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;width:140px !important; padding-left:25px !important;">
        <a href="http://us2.campaign-archive2.com/home/?u=2459504fea7fce4a4d370e604&id=e9ad054321" style="font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">view past issues</a> | <a href="http://us2.campaign-archive1.com/feed?u=2459504fea7fce4a4d370e604&id=e9ad054321" style="font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;" title="subscribe to the email archive feed">RSS</a>
    </td>
   
    <td align="left" style="padding:8px !important;margin:0px !important;color:#111 !important;border:none !important;font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;width:100px !important;">
                <a href="http://table3restaurantgroup.us2.list-manage.com/profile?u=2459504fea7fce4a4d370e604&id=e9ad054321&e=d243b064c0" style="font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">update list profile</a>

            </td>
    <td width="100" align="left" style="padding:8px !important;margin:0px !important;color:#111 !important;border:none !important;font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;width:100px !important;position:relative !important;">
    <a href="#" style="font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;" onclick="if(document.getElementById('mc_translate_links').style.display=='none'){ document.getElementById('mc_translate_links').style.display = 'block'; } else { document.getElementById('mc_translate_links').style.display = 'none'; } return false;">translate</a>
    <div id="mc_translate_links" style="display: none;position:absolute !important;background-color:#ccc !important; border:1px solid #666 !important;"><a style="font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;" rel="nofollow" title="English" href="http://translate.google.com/translate?hl=auto&langpair=auto|en&u=http%3A%2F%2Feepurl.com%2FcZuLs">English</a><br><a style="font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;" rel="nofollow" title="العربية" href="http://translate.google.com/translate?hl=auto&langpair=auto|ar&u=http%3A%2F%2Feepurl.com%2FcZuLs">العربية</a><br><a style="font-family:Helvetica,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;" rel="nofollow" title="българ

BThies BThies, 5 years ago

What we need to see is the code from a sent email (not the browser code or browser based since it adds additional content not seen in the email).

Can you send a direct test to my email below?


Brian Thies
Professional Email Developer
Thies Publishing

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