Help fixing bugs in an email template?

Hi all, I'm new to coding, which means when things go pear shaped at testing stage I'm better at tearing my hair out than I am at identifying how to fix things :S I'm hoping someone here might be able to hold my hand?

I've begun testing this html email in a couple of random email browsers.

In screens that are larger than 480px, the top section should have the logo sitting to the left and the preview/teaser copy sitting to the right. This is working fine in some browsers but the elements seem to be centered in Apple Mail and Outlook (Mac 2011), with the logo sitting above the teaser text (similar to how it should look for screens smaller than 480px, but not completely).

What is likely to be the culprit(s)?

roshodgekiss roshodgekiss, 4 years ago

Hi there Cheli, I took a look at your code and there were a few small things, including:

- Invalid code, ie. <td width="180px"> and some missing <td> tags
- Header image had width: 100%; applied via the media query - this was causing the header to become too wide
- In the header, id="contentWrapper" was missing, so the content table was not resizing when the media query was triggered

Once these were fixed, things started to look good. Here's the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" name="robots" content="text/html; charset=utf-8" noindex nofollow>
<meta property="og:title" content="">
<meta name="viewport" content="width=device-width">
<title></title>
<style type="text/css">
        /* Client-specific Styles */
        #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
        body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
        body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
        /* Reset Styles */
        body{margin:0; padding:0;}
        img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
        table td{border-collapse:collapse;}
        #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
        /* Smaller Screen Styles */
        @media only screen and (max-width: 480px) {
            table[id=backgroundTable]{
                max-width:600px !important;
                width:100% !important;
            }
            table[id=contentWrapper],[class=header],[class=contentTable]{ 
                width:320px !important;
            }
            
            /* Below has been edited by Ros */ 
            td[class=image] { text-align: center; }
                        
            table[class=header] td { 
                text-align: center !important; /* fix 'View in your browser' message */
            }
            
            td[class=image] img{
                /* height:auto !important;
                   width:100% !important; resizing image like crazy */
                   padding-top: 10px !important;
            }
        }
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0; -webkit-text-size-adjust: none; background-color: #FAFAFA; padding: 0; width: 100% !important;" bgcolor="#FAFAFA">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin: 0; background-color: #FAFAFA; padding: 0; height: 100% !important; width: 100% !important;" bgcolor="#FAFAFA"><tr>
        <td align="center" valign="top" style="border-collapse: collapse;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" height="100" width="600" id="contentWrapper"><tr>
                <td align="center" valign="bottom" height="72" style="border-collapse: collapse;">
                    <!-- // Begin Template Preheader \\ -->
                    <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>
                        <table cellpadding="0" cellspacing="0" width="180" align="left" class="header"><tr>
                            <td valign="bottom" style="border-collapse: collapse;" class="image">
                                <a href="http://www.wehi.edu.au" target="_blank" style="color: #2755A1;">
                                <img src="http://www.wehi.edu.au/uploads/e-mail/WEHI_logo.png" alt="Walter and Eliza Hall Institute logo" title="institute logo" style="padding-right: 10px; line-height: 100%; outline: none; border: 0; text-decoration: none; height: 42px; width: 180px;"></a>
                            </td>
                        </tr></table>
                        <table cellpadding="0" cellspacing="0" width="410" class="header"><tr>
                            <td valign="bottom" style="border-collapse: collapse; text-align: right;">
                                <p style="font-size: 13px; line-height: 150%; font-family: Helvetica, Arial, sans-serif; color: #939598;">Can't view this event invitation? <a href="" target="_blank" style="color: #2755A1;">View it in your browser.</a></p>
                            </td>
                        </tr></table>
                    </tr></table>
<!-- // Begin Template Main message \\ -->
                    <table border="0" cellpadding="20" cellspacing="0" width="600" class="contentTable" style="background-color: #FFF;" bgcolor="#FFF"><tr>
                        <td align="center" valign="top" style="border-collapse: collapse;">
                            <h1 style="font-size: 22px; line-height: 100%; font-family: Helvetica, Arial, sans-serif; color: #939598; text-align: center;" align="center">Inviter</h1>
                            <h2 style="font-size: 22px; line-height: 100%; font-family: Helvetica, Arial, sans-serif; color: #939598; text-align: center;" align="center">is pleased to invite <br><em>you</em>
                            </h2> 
                            <h3 style="font-size: 26px; line-height: 100%; font-family: Helvetica, Arial, sans-serif; color: #2755A1; text-align: center;" align="center">to &quot;event title&quot;</h3>
                            <p style="font-size: 13px; line-height: 150%; font-family: Helvetica, Arial, sans-serif; color: #000; text-align: center;" align="center">"purpose"<br>
                            at "location"<br>
                            on "day, date month at time"</p>
                            <h4 style="font-family: Helvetica, Arial, sans-serif; text-align: center;" align="center">RSVP: &quot;name&quot; by &quot;day, date month&quot;</h4>
                            <p style="font-size: 13px; line-height: 150%; font-family: Helvetica, Arial, sans-serif; color: #000; text-align: center;" align="center"><a href="" style="color: #2755A1;">By email</a> or phone (03) 0000 0000<br>
                            please advise of any dietary requirements</p>
                            <p style="font-size: 13px; line-height: 150%; font-family: Helvetica, Arial, sans-serif; color: #000; text-align: center;" align="center">Dress code: "code"<br>
                            "parking directions"</p>
                        </td>
                    </tr></table>
                    <table border="0" cellpadding="10" cellspacing="0" width="600px" class="contentTable" style="background-color: #FFF;" bgcolor="#FFF"><tr>
                        <td align="center" valign="top" class="image" style="border-collapse: collapse;">
                            <a href="" target="_blank" style="color: #2755A1;">
                            <img src="http://placehold.it/580x300" alt="" style="max-width: 100%; outline: none; line-height: 100%; border: 0 none; text-decoration: none; display: block; height: auto; max-height: 100%;"></a>
                        </td>
                    </tr></table>
                </td>
            </tr></table>
        </td>
    </tr></table>
</center>
</body>
</html>

By all means, give the above a look - I've commented my changes, so hopefully you'll learn something from them :) Thanks, Cheli! Best of luck :)


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

Hi Ros,

Thank you for such a comprehensive answer, and also for taking the time to go through the code, make some changes and leave comments. I'm incredibly grateful :)

Here is my updated html. I couldn't find the <td width=180px> you mentioned, but I've put in the missing <td> you located and adjusted my image settings (you're right, the original design wasn't particularly conventional!). My apologies for the missing id=contentWrapper; it was an issue I'd fixed but hadn't reuploaded so it was a good pick up on your part and sloppy work on my side.

I'm really happy with how the email is previewing in all the browsers I have available here, although Zimbra mail appears to display the smaller screen size styles even on a desktop. Do you know of a work around for this? It's probably not a big issue as I don't think many of our readers will use Zimbra, but my manager does so it might be worth trying to fix ;)

The last thing I'd like to do is have the header text align to the right on larger screens, but centred on smaller. I can't for the life of me work out how and where to place my styles to ensure that happens. Do you have any suggestions?

roshodgekiss roshodgekiss, 4 years ago

Hi Cheli,

Great to hear we're making progress here! And don't beat yourself up over missing classes, etc - we're all learning together.

I have to admit, no-one on our team has a copy of Zimbra mail and to my knowledge, we really get no enquiries regarding it. So I'm not sure if there's much we can do in this scenario, except show your boss that it doesn't even rate a mention in our email client market share report ;)

The last thing I'd like to do is have the header text align to the right on larger screens, but centred on smaller.

In the code within my previous post, I've already done this for you. This code snippet is what you're after:

table[class=header] td { 
   text-align: center !important; /* fix 'View in your browser' message */
}

Thanks, Cheli - all the best!


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

Thanks for the advice re: Zimbra. I'm not too worried about it and I doubt my manager will be either as she's pretty reasonable, I was just double checking there wasn't anything I could do to fix it for her first :)

I'm sorry I wasn't more clear with the alignment issue I was seeing - the header text centres well in the small screen version thanks to your code snippet, but I haven't been able to align it to the right for larger screens without then affecting the smaller screen version IYKWIM? Again, it's not a huge issue and I can run this template as it stands but I figure this is an issue I ought to be able to resolve...

roshodgekiss roshodgekiss, 4 years ago

Hi Cheli, forgive me for being so dense, but which email client are you having trouble with the right-alignment? This is what I'm seeing: http://cl.ly/image/0W3x000P0i2V

If text-align: right; isn't working, you could potentially try using <td align="right"> on the surrounding cell. :)


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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free