Table background NOT working..

Hi. Hope someone can help. Apart from the "bulletproof" code (which is riddled with many issues) there are a gazillion templates online, but none of them can make this work. 

This is my code (just focus on the background alignment...the text etc can be padded later) -- 
http://d3cbux4et72c14.cloudfront.net/wtd/test3.html

These are my requirements:

1. Has to work in Outlook 2007, 2010 and 2013

2. Has to work in iPhone and Android native mail clients (i.e., has to be properly responsive, not just show up right but in miniscule font)

3. Has to NOT break when forwarded or replied to (the bulletproof VML stuff does not seem to hold when

Is this possible? Could someone let me know why the code above breaks in both Outlook and in Gmail -- while looking OK inside browsers? 

Many thanks for any pointers or directions!

morespinach, 3 years ago

Just to add, this is how it looks in Outlook -- border is nudged to the right..
http://i.imgur.com/Na1M4vQ.png

roshodgekiss roshodgekiss, 3 years ago

Hi there morespinach, there was a little bit of refactoring that had to be done in order to get this background to align properly. Nothing so much on the part of the original code, as the fact that VML is incredibly fiddly to work with. In order to get the alignment right, the <v:rect ... had to have its position explicitly defined, which mostly required a lot of back and forth. Here's the result:

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:621px;position:relative;left:-5px;">

So respect to the original bulletproof code - it was not an easy task to get background images working in Outlook to begin with (props to Brian and Stig), let alone get them to display as desired.

Anyway, I made a few tweaks:

<!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" />
<meta name="viewport" content="initial-scale=1.0">
<title>Template Tests</title>
<style type="text/css">
a {
    color: #00A1DE
}
.ReadMsgBody {
    width: 100%;
    background-color: #ebebeb;
}
.ExternalClass {
    width: 100%;
    background-color: #ebebeb;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height:100%;
}
body {
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
}
body {
    margin:0;
    padding:0;
}
table {
    border-spacing:0;
    border-collapse: collapse;
}
table td {
    border-collapse:collapse;
}
.yshortcuts a {
    border-bottom: none !important;
}
/* Constrain email width for small screens */
@media screen and (max-width: 600px) {
 table[class="container"] {
 width: 95% !important;
}
}
/* Give content more room on mobile */
@media screen and (max-width: 480px) {
 td[class="container-padding"] {
 padding-left: 12px !important;
 padding-right: 12px !important;
}
}
/* Styles for forcing columns to rows */
@media screen and (max-width : 600px) {
 td .scaleit {
 width:100% !important;
 height: auto !important;
}
 td[class="force-col"] {
 display: block !important;
 padding-right: 0 !important;
}
 table[class="col-2"] {
       /* unset table align="left/right" */
       float: none !important;
 width: 100% !important;
        /* change left/right padding and margins to top/bottom ones */
       margin-bottom: 12px;
 padding-bottom: 12px;
}
}
.cen {
    text-align: center;
    margin: auto
}
em {
    color: #999999;
}
p, br, div, span {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px
}
</style>
</head>
<body style="margin:0; padding:10px 0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" bgcolor="#ebebeb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="margin: 0; " bgcolor="#ebebeb">
  <tr>
    <td align="center" valign="top" bgcolor="#ebebeb"><!-- 600px container (white background) -->
      <table width="632" cellpadding="0" cellspacing="0" class="container" style=" border-collapse: collapse; max-width: 632px">
        <tr>
          <td bgcolor="#ffffff" width="632" style="padding: 0px; margin: 0px;"><img src="http://d3cbux4et72c14.cloudfront.net/wtd/wtd-top.jpg" alt="" height="129" class="scaleit" style="mso-table-lspace:0;mso-table-rspace:0; padding-top: -1px; margin: 0px; display: block;"></td>
        </tr>
        <tr>
          <td background="http://d3cbux4et72c14.cloudfront.net/wtd/wtd-bg.jpg" style="align: center; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #424242; font-size: 16px; line-height: 20px; background-size: contain;"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:621px;position:relative;left:-5px;">
    <v:fill type="tile" src="http://d3cbux4et72c14.cloudfront.net/wtd/wtd-bg.jpg" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
            <table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
            <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
        </tr>
        <!-- END SECTION 4 -->
        <tr>
          <td align="center" valign="bottom" style="padding: 0px; margin: 0px; text-align: center; "><img src="http://d3cbux4et72c14.cloudfront.net/wtd/wtd-footer2.jpg" alt="Digital Banking: Footer" class="scaleit" align="middle" style="margin: 0px auto; padding: 0px; display: block; max-width: 632px; "></td>
        </tr>
        <!-- ### END CONTENT ### -->
      </table>
      <br>
      <table border="0" width="550" cellpadding="0" cellspacing="0" class="container" style="border-collapse: collapse; max-width: 550px">
        <tr>
          <td style="padding: 0px; margin: 0px; text-align: center; font-size: 12px; line-height: 18px; font-family: 'Helvetica Neue',Helvetica, Arial, sans-serif; color: #777777; padding: 5px;" valign="top" > Absolute footer text comes here.<br>
            <br></td>
        </tr>
      </table>
      <br>
      <br>
      <!--/600px container --></td>
  </tr>
</table>
<!--/100% wrapper-->
</body>
</html>

1. Has to work in Outlook 2007, 2010 and 2013
2. Has to work in iPhone and Android native mail clients (i.e., has to be properly responsive, not just show up right but in miniscule font)

Outlook 2007: http://cl.ly/image/401L1C0P0z3Q
iPhone Mail (iOS 6): http://cl.ly/image/2C3i3o183y3B

3. Has to NOT break when forwarded or replied to (the bulletproof VML stuff does not seem to hold when

Sorry, there's no workaround to formatting going bonkers when an email is replied, or forwarded. We recommend using the <forwardtoafriend> tag for this reason.

One more thing - I notice the font-stack is failing in Outlook and this is because of a bug in this email client which affects font names with more than one word in the name. If you want to use 'Helvetica Neue', you will have to use <font> tags to define this in the <td>. That said, just Helvetica should work.

Thanks, morespinach - I hope this has given you a little guidance, but be sure to let us know if there's anything else we can help with. Have an awesome week!


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

Hi people,

I am working on an enewsletter but cant get the header of the footer background images to display. I have followed http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email guidance and I need help to solve this. The code is as followes:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Touch Digital Newsletter</title>
    <style type="text/css">
    
@font-face {
      font-family:'DeliciousBold';
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-bold-webfont.eot');
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-bold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-bold-webfont.woff') format('woff'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-bold-webfont.ttf') format('truetype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-bold-webfont.svg#DeliciousBold') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family:'DeliciousRoman';
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-roman-webfont.eot');
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-roman-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-roman-webfont.woff') format('woff'),
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-roman-webfont.ttf') format('truetype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-roman-webfont.svg#DeliciousRoman') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family:'MuseoSans100Regular';
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_100-webfont.eot');
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_100-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_100-webfont.woff') format('woff'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_100-webfont.ttf') format('truetype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_100-webfont.svg#MuseoSans100Regular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family:'MuseoSans300Regular';
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_300-webfont.eot');
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_300-webfont.woff') format('woff'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_300-webfont.ttf') format('truetype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_300-webfont.svg#MuseoSans300Regular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family:'MuseoSans700Regular';
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_700-webfont.eot');
      src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_700-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_700-webfont.woff') format('woff'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_700-webfont.ttf') format('truetype'), 
    url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_700-webfont.svg#MuseoSans700Regular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    a:hover {
    text-decoration: underline !important; font-size: 13px;
    }
    td.promocell p { 
        color:#999999; font-size:13px; line-height:19px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; font-weight:normal;
    }
    td.promocell p a {
        color:#00A800; text-decoration:none;}
        
    td.promocell p a:hover {
        text-decoration: underline !important; font-size: 16px;}
        
    td.contentblock h4 {
        color:#005B00 !important; font-size:20px; line-height:24px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:10px; padding-top:0; padding-bottom:0; font-weight:normal;
    }
    td.contentblock h3 {
        color:#005B00 !important; font-size:24px; line-height:26px; font-family:'DeliciousBold', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:10px; padding-top:0; padding-bottom:0 font-weight:normal;
    }
    
    td.contentblock h4 a {
        color:#00A800;
        text-decoration:none;
    }
    td.contentblock p { 
          color:#555555; font-size:13px; line-height:19px; font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:12px; padding-top:0; padding-bottom:0; font-weight:normal;
    }
    td.contenblock ul {
         margin: 0; padding: 0;list-style-position: inside;
    }
    
    td.contentblock ul li {
           font-weight:normal; font-size:13px; line-height:19px; font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; color:#555555; margin-top:0; margin-bottom:12px; padding-top:0; padding-bottom:0;
    }
    td.contentblock p a { 
          color:#00A800; text-decoration:none;
    }    
    v:* { 
        behavior: url(#default#VML); display: inline-block; }    
        
    @media only screen and (max-device-width: 480px) {
        
        @font-face {
        font-family: 'DeliciousBold';
        src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-bold-webfont.svg#DeliciousBold') format('svg');
        }
        @font-face {
        font-family: 'DeliciousRoman';
        src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/delicious-bold-webfont.svg#DeliciousBold') format('svg');
        }
        @font-face {
        font-family: 'MuseoSans100Regular';
        src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_100-webfont.svg#MuseoSans100Regular') format('svg');
        }
        @font-face {
        font-family: 'MuseoSans300Regular';
        src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_300-webfont.svg#MuseoSans300Regular') format('svg');
        }
        @font-face {
        font-family: 'MuseoSans700Regular';
        src: url('http://www.touchpointdigital.co.uk/sites/all/themes/zen_touchpoint/css/fonts/museosans_700-webfont.svg#MuseoSans700Regular') format('svg');
        }
        
        
         div[class="header"] {
              font-size: 16px !important;
         }
         table[class="table"], td[class="cell"] {
              width: 300px !important;
         }
        table[class="promotable"], td[class="promocell"] {
              width: 300px !important;
         }
        td[class="footershow"] {
              width: 300px !important;
         }
        table[class="hide"], img[class="hide"], td[class="hide"] {
              display: none !important;
         }
        table[class="newstable"] {
            align: center !important; 
        }
         img[class="divider"] {
              height: 1px !important;
        }
        td[class="logocell"] {
            padding-top: 10px !important; 
            padding-left: 40px !important;
            width: 300px !important;
        }
        td[class="newscell"] {
            align: center !important; 
        }
         img[id="screenshot"] {
              width: 325px !important;
              height: 127px !important;
         }
        img[class="galleryimage"] {
              width: 53px !important;
              height: 53px !important;
        }
        
        img[class="articleimage"] {
              width: 110px !important; height:auto !important margin-bottom: 7px !important;
              
        }
        p[class="reminder"] {
            font-size: 11px !important;
        }
        h3[class="third"] {
            line-height: 24px !important;
             margin-bottom: 15px !important;
            font-size: 20px !important;
        }
        
        h4[class="secondary"] {
            line-height: 22px !important;
            margin-bottom: 15px !important;
            font-size: 18px !important;
        }
    }
    </style>
    <!--[if gte mso 9]>
    <style>
        ul {
               margin: 0 0 0 24px;
               padding: 0;
               list-style-position: inside;
        }
    </style>
    <![endif]-->
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
    
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#BBBDBF">
    <tr>
        <td bgcolor="#BBBDBF" width="100%">
            <table width="580px" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
                <tr>
                    <td width="580px" td bgcolor="#CFF0FA" class="cell">
                        
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                              <tr>
                                <td bgcolor="#c9e6eb" class="newscell">
                                    <p style="color:#c9c9c9;
                                    font-size:12px;
                                    font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin:10px 0px 0px 10px;">
                                    <webversion style="color:#808080;text-decoration:none;">View in Browser Window</webversion>
                                    &nbsp;&nbsp;|&nbsp;&nbsp;
                                    <unsubscribe style="color:#808080;text-decoration:none;">Unsubscribe</unsubscribe>
                                    &nbsp;&nbsp;|&nbsp;&nbsp;
                                    <forwardtoafriend style="color:#808080;text-decoration:none;">Forward to a friend</forwardtoafriend>
                                    </p>
                                </td>
                              </tr>
                            </table>
                           
                         <img border="0" src="/images/header_toptop_shadow2.gif" alt="Touchpoint Digital top shadow" width="580" style="background-color:#c9e6eb9; display:block;">
                                
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                            <td background="/images/head_bg.png" bgcolor="#c9e6eb" width="580px" height="220px" valign="top">
                                <!--[if gte mso 9]>
                                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:220px;">
                                <v:fill type="tile" src="images/head_bg.png" color="#c9e6eb" />
                                <v:textbox inset="0,0,0,0">
                                  <![endif]-->
                                  
                                
                                        
                              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                      <td>
                                          <table width="250px" border="0" align="right" cellpadding="0" cellspacing="0" class="newstable">
                                              <tr>
                                                <td width="250px" colspan="11">
                                                
                                                    
                                                      <table border="0" align="center" cellpadding="0" cellspacing="0">
                                                          
                                                          <tr>
                                                            <td width="80" align="center" bgcolor="#00a800" style="color:#FFFFFF; font-size:13px; line-height:14px; font-family:'DeliciousBold', Helvetica, Arial,sans-serif; vertical-align:bottom">
                                                            <br>
                                                              <span style="text-transform:uppercase;">
                                                                <currentmonthname>
                                                                </span><br>
                                                                <span style="font-family:'DeliciousRoman', Helvetica, Arial,sans-serif;">Newsletter</span>
                                                            </td>
                                                          </tr>
                                                          
                                                          
                                                         <tr>
                                                            <td bgcolor="#00a800" width="80" style="font-size:1px;line-height:2px;">&nbsp;
                                                            </td>
                                                          </tr>
                                                          <tr>
                                                            <td width="80" height="5px"><img src="/images/news_soc_icons_07_07.gif" alt="Digital Marketing" width="80" height="5" align="top" style="display:block"></td>
                                                          </tr>
                                                      </table>
                                                  
                                                  
                                                </td>
                                              </tr>
                                              
                                              <tr>
                                                <td height="18" colspan="11"><img src="/images/tspacer.gif" width="250" height="1" alt=""></td>
                                              </tr>
                                              
                                              <tr height="33px">
                                                <td width="20" height="33"><img src="/images/tspacer.gif" width="20" height="28" alt=""></td>
                                                <td width="34" height="33"><a href="https://plus.google.com/111832369738476856509/"><img src="/images/t_googlep_1.gif" width="34" height="33" alt="google" style="border-style: none; -ms-interpolation-mode:bicubic;"></a>
                                                <a href="https://www.facebook.com/pages/Touchpoint-Digital-Ltd/350606958680?ref=ts"></a></td>
                                                <td width="10" height="33"><img src="/images/tspacer.gif" width="10" height="1" alt=""></td>
                                                <td width="34" height="33"><a href="http://pinterest.com/touchpointdigi/"><img src="/images/t_pintrest_1.gif" width="34" height="33" alt="pintrest" style="border-style: none; -ms-interpolation-mode:bicubic;"></a>
                                                <a href="http://www.linkedin.com/company/touchpoint-digital"></a></td>
                                                <td width="10" height="33"><img src="/images/tspacer.gif" width="10" height="1" alt=""></td>
                                                <td width="34" height="33"><a href="https://twitter.com/Touchpointdigi"><img src="/images/t_twitter_1.gif" width="34" height="33" alt="twitter" style="border-style: none; -ms-interpolation-mode:bicubic;"></a></td>
                                                <td width="10" height="33"><img src="/images/tspacer.gif" width="10" height="1" alt=""></td>
                                                <td width="34" height="33"><a href="http://www.linkedin.com/company/touchpoint-digital"><img src="/images/t_lkin_1.gif" width="34" height="33" alt="linkedin" style="border-style: none; -ms-interpolation-mode:bicubic;"></a></td>
                                                <td width="10" height="33"><img src="/images/tspacer.gif" width="10" height="1" alt=""></td>
                                                <td width="34" height="33"><a href="https://www.facebook.com/pages/Touchpoint-Digital-Ltd/350606958680?ref=ts"><img src="/images/t_fb_1.gif" width="34" height="33" alt="facebook" style="border-style: none; -ms-interpolation-mode:bicubic;"></a></td>
                                                <td width="20" height="33"><img src="/images/tspacer.gif" width="20" height="28" alt=""></td>
                                              </tr>
                                            </table>
                                       </td>
                                   </tr>
                                    <tr>
                                        <td>                                         
                                            <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                                              <tr>
                                                <td valign="bottom">
                                                
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="table">
                                                      <tr>
                                                        <td width="580px" class="logocell" valign="top"><img border="0" src="/images/tspacer.gif" width="80" alt="" height="76" align="top" class="hide"><img src="/images/logo24.png" width="272" height="76" align="top" alt="Touchpoint Digital ltd" style="-ms-interpolation-mode:bicubic;"><img border="0" src="/images/tspacer.gif" width="228" height="10" align="top" class="hide"><br class="hide">
                                                        <img border="0" src="/images/tspacer.gif" width="80" alt="" height="1" align="top" class="hide"><span style="color:#32CDF2; font-family:'MuseoSans100Regular',Helvetica,Arial,sans-serif;">Full Service Internet Marketing Company</span>
                                                        </td>
                                                      </tr>
                                                  </table>
                                                  
                                                </td>
                                              </tr>
                                          </table>
                                        </td>
                                     </tr>
                                 </table>
                                    
                                 
                                  <!--[if gte mso 9]>
                                  </v:textbox>
                                  </v:rect>
                                  <![endif]-->
                                  
                              </td>
                            </tr>
                          </table>
                          
                        <img border="0" src="/images/header_bottom_shadow.gif" alt="Touchpoint Digital bottom shadow" width="580" style="background-color:#f9f9f9; display:block;">
                            
                        <table width="100%" cellpadding="20px" cellspacing="0" border="0">
                            <tr>
                                      <td class="promocell" bgcolor="#F9F9F9">                      
                                              <multiline label="Main feature intro">
                                              <p style="color:#555555; font-size:13px; line-height:19px; font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; font-weight:normal;">This months feature here</p>
                                              </multiline>
                                      </td>
                          </tr>
                        </table>
          
                        <img border="0" src="/images/header_bottom_shadow.gif" alt="Touchpoint Digital bottom shadow" width="580" style="background-color:#ffffff; display:block;">
                                           
                    <repeater>
                    <layout label="New feature">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                           <tr>
                              <td width="100%" bgcolor="#ffffff">
                                      <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                          <tr>
                                              <td bgcolor="#ffffff" class="contentblock">
                                                  <h4 style="color:#005B00 !important; font-size:20px; line-height:24px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:10px; padding-top:0; padding-bottom:0; font-weight:normal;" class="secondary"><singleline label="Title">Title of new feature</singleline></h4>
                                                  <multiline label="Description"><p style="color:#555555; font-size:13px; line-height:19px; font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:12px; padding-top:0; padding-bottom:0; font-weight:normal;">A short explanation of the new feature</p></multiline>
                                                  </td>
                                              </tr>
                                          </table>
                              </td>
                          </tr>
                        </table>
                          
                    <img border="0" src="/images/tspacer.gif" width="1" height="10" class="divider" alt="divider"><br>
                    
                    </layout>
                    
                       <layout label="Article with image">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                           <tr>
                              <td width="100%" bgcolor="#ffffff" valign="top">
                                      <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                        <tr valign="top">
                                          <td valign="top">
                                          
                                              <table cellpadding="0" cellspacing="0" border="0" align="left">
                                                  <tr valign="top">
                                                   <td width="220px" cellspacing="0" border="0" valign="top" class="contentblock">   
                                                                  <img style="border: solid 1px #999999; margin-bottom:10px; -ms-interpolation-mode:bicubic; width:200px; min-width:110px" src="/images/affiliate_marketing.jpg" alt="image" width="200" editable="true" label="Touchpoint Digital image"><br>
                                                                  <multiline label="Description">
                                                                  <span style="font-size: 13px; line-height: 19px; font-family: 'MuseoSans300Regular', Helvetica, Arial, sans-serif; font-style:italic; color:#999999; margin-top:10px; margin-bottom:12px; padding-top:0px; padding-bottom:0; font-weight:normal;">Enter description here</span></multiline>
                                                  </td>
                                              </tr>
                                             </table>
                                              <table cellpadding="0" cellspacing="0" border="0" align="right">
                                                <tr valign="top">
                                                  <td width="320" bgcolor="#ffffff" class="contentblock" valign="top" span style="padding-left:0px;"><h4 style="color:#005B00 !important; font-size:20px; line-height:24px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:10px; padding-top:0; padding-bottom:0; font-weight:normal;" class="secondary">
                                                    <singleline label="Title">Article with image</singleline>
                                                  </h4>
                                                    <multiline label="Description">
                                                      <p style="color:#555555; font-size:13px; line-height:19px; font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:12px; padding-top:0; padding-bottom:0; font-weight:normal;">Article here </p>
                                                     </multiline></td>
                                                 </tr>
                                               </table>
                                          </td>
                                        </tr>
                                      </table>
                              </td>
                          </tr>
                        </table>
                          
                    <img border="0" src="/images/tspacer.gif" width="1" height="10" class="divider" alt="divider"><br>
                    </layout>
                    
                    <layout label="Article with video">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                           <tr>
                              <td width="100%" bgcolor="#ffffff" valign="top">
                                      <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                        <tr valign="top">
                                          <td valign="top">
                                          
                                              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                  <tr>
                                                   <td cellspacing="0" border="0" style="display:block;" class="contentblock">   
                                                    <img src="/images/video_image.jpg" alt="image" width="535px" align="center" style="border: solid 1px #999999; width:535px; min-width:285px; margin-bottom:10px;" editable="true" label="Touchpoint Digital video"><br>
                                                    <multiline label="Description">
                                                    <span style="font-size: 13px; line-height: 19px; font-family: 'MuseoSans300Regular', Helvetica, Arial, sans-serif; font-style:italic; color:#999999; margin-top:10px; margin-bottom:12px; padding-top:0px; padding-bottom:0; font-weight:normal;">Enter description here</span></multiline>
                                                  </td>
                                              </tr>
                                                <tr>
                                                  <td width="320" bgcolor="#ffffff" class="contentblock" span style="padding-left:0px;"><br>
                                                    <h4 style="color:#005B00 !important; font-size:20px; line-height:24px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:10px; padding-top:0; padding-bottom:0; font-weight:normal;" class="secondary">
                                                        <singleline label="Title">Article with Video</singleline>
                                                      </h4>
                                                        <multiline label="Description">
                                                      <p style="color:#555555; font-size:13px; line-height:19px; font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:12px; padding-top:0; padding-bottom:0; font-weight:normal;">Article text to go here</p>
                                                     </multiline>
                                                </td>
                                                 </tr>
                                               </table>
                                            
                                          </td>
                                        </tr>
                                      </table>
                              </td>
                          </tr>
                        </table>
                          
                    <img border="0" src="/images/tspacer.gif" width="1" height="10" class="divider" alt="divider"><br>
                    </layout>
                        
                    <layout label="Article, tip or resource">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                          <tr>
                                                                <td width="100%" bgcolor="#ffffff">
            
                                                                    <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                                                            <tr>
                                                                                    <td bgcolor="#ffffff" class="contentblock">
                                                <h4 class="secondary"><singleline label="Title">Title of article/tip/resource</singleline></h4>
                                                <multiline label="Description"><p>Description</p></multiline>
                                                                                    </td>
                                                                            </tr>
                                                                    </table>
            
                                                                    </td>
                                                              </tr>
                        </table>
                          
                    <img border="0" src="/images/tspacer.gif" width="1" height="10" class="divider" alt="divider"><br>
                    </layout>
                
                    <layout label="Pull quote">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                              <tr>
                                                                    <td width="100%" bgcolor="#ffffff">
                  
                                    <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                        <tr>
                                            <td bgcolor="#ffffff" class="contentblock">
        
                                                <h4 style="color:#555555 !important; font-size:20px; line-height:24px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:10px; padding-top:0; padding-bottom:0; font-weight:normal;" class="secondary"><singleline label="Pull quote">Enter the quote in full</singleline></h4>
        
                                            </td>
                                        </tr>
                                    </table>
                  
                                                                    </td>
                                                              </tr>
                        </table> 
                             
                    <img border="0" src="/images/tspacer.gif" width="1" height="10" class="divider" alt="divider"><br>
       </layout>
                    
       <layout label="Conclusion">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                          <tr>
                                                                <td width="100%" bgcolor="#ffffff">
                  
                                    <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                        <tr>
                                            <td bgcolor="#ffffff" class="contentblock">
        
                                                <h4 style="color:#005B00 !important; font-size:20px; line-height:24px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:10px; padding-top:0; padding-bottom:0; font-weight:normal;" class="secondary"><singleline label="Conclusion">And finally</singleline></h4>
                                                <multiline label="Description"><p style="color:#555555; font-size:13px; line-height:19px; font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; margin-top:0; margin-bottom:12px; padding-top:0; padding-bottom:0; font-weight:normal;">Description</p></multiline>
        
                                            </td>
                                        </tr>
                                    </table>
                  
                                                                </td>
                                                          </tr>
                        </table>                                             
         </layout>
        </repeater> 
        
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td background="/images/foot_bg.jpg" bgcolor="#CFF0FA" width="100%" height="323" valign="top" style="display:block;">
                                                <!--[if gte mso 9]>
                                                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:323px;">
                                                <v:fill type="tile" src="images/foot_bg.jpg" color="#c9e6eb" />
                                                <v:textbox inset="0,0,0,0">
                                                <![endif]-->
                            
                                                                    <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                                                        <tr valign="bottom">
                                                                          <td valign="bottom" class="footershow">
                                                                              <table align="left" class="newstable">
                                                                                <tr>
                                                                                    <td valign="bottom">
                                                                                      <h4 style="font-family:'DeliciousBold', Helvetica, Arial, sans-serif; color:#005B00; font-size:20px; margin-bottom:0px; margin-top:0;" class="secondary">Contact us</h4>
                                                                                      <p style="font-family:'MuseoSans300Regular', Helvetica, Arial, sans-serif; color:#005B00; font-size:13px; line-height:20px; margin-top:0; margin-bottom:0;" class="reminder">
                                                                                      <strong>Touchpoint Digital</strong><br>
                                                                                      St Andrews House (1st floor) <br>
                                                                                      59 St Andrews Street <br>
                                                                                      Cambridge CB2 3BZ</p>
                                                                                    </td>
                                                                                  </tr>
                                                                                </table>
                                                                                
                                                                                <table align="right" class="newstable">
                                                                                  <tr>
                                                                                    <td align="right" valign="bottom"><br class="hide">
<br class="hide">
   
                                                                              <a style="color:#00A800; font-size:13px; font-family: 'MuseoSans300Regular', Helvetica, Arial, sans-serif; line-height:20px; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; text-decoration:none" href="http://www.touchpointdigital.co.uk">touchpointdigital.co.uk</a>
                                                                              <h3 style="color:#005B00; font-size:20px; font-family:'MuseoSans700Regular', Helvetica, Arial, sans-serif; margin-bottom:0; margin-top:0px; padding-top:0; padding-bottom:0;">0845 163 1163</h3>
                                                                          <a style="color:#00A800; font-size:13px; font-family: 'MuseoSans300Regular', Helvetica, Arial, sans-serif; line-height:20px; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; text-decoration:none" href="mailto:info@touchpointdigital.co.uk">info@touchpointdigital.co.uk</a></td>
                                                                                  </tr>
                                                                                </table>
                                                                         </td>
                                                                       </tr>
                                                                    </table>
                                                                <!--[if gte mso 9]>
                                                                </v:textbox>
                                                                </v:rect>
                                                                <![endif]-->
                                            </td> 
                                        </tr> 
                                    </table>
                    </td>
                </tr>
            </table>                    
        </td>
    </tr>
</table>                               
</body>
</html>

Help
Ella

roshodgekiss roshodgekiss, 3 years ago

Hi there, Ella! The issue at hand is that your images have to be hosted on your own server in order for this technique to work at present, I'm sorry to say. If the images are zipped up with your campaign, they won't be referenced properly. So code like this...

<v:fill type="tile" src="images/head_bg.png" color="#c9e6eb" />

... should really look like...

<v:fill type="tile" src="http://yourdomain.com/images/head_bg.png" color="#c9e6eb" />

Otherwise, what you've got here looks really good. Nice one on the use of web fonts, by the way!

Thanks, Ella - let us know how you go :)


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