mattymow, 2 years ago

Has anyone had issues with using multiple BG images in the same table? -- i.e. - a left <td> BG image and a right <td> BG image? The first BG image is showing, but none of the others are. I've tried adjusting the ID listed as id="theImage" and id="theText" but have had no luck. Thanks in advance!

-- update, I got this working. thx

micha606, 2 years ago

Dear Brian,

I am just designing an email newsletter for a customer and went into a problem with the background-image-solution. While all emails before looked great, *this* email makes headaches.

The difference between the actual email and the ones befor is, the actual email is longer than the others before. So, while I never ran into problems using a background height of ~1200 pixel, now the image gets interrupted, currently I am at a background height of 1826px.

The design is a simple three-column table (left border + content + right border), first+last rows are colspanned=3 with a closing top+bottom image. I have used this email template for a long time now and never ran into problems, but now the background should be very "high" - are there any limitations known for your VML-solution?

Regards,
Michael

BIC, 2 years ago

I got this working for a newsletter with td's that have backgrounds. Works great :D thanks for this solution. The code below is from a template and the image references are replaced with absolute url's.

The code worked straight away, the only thing I had to change was the positioning of the contents of the div.

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Nieuwsbrief Huis voor de Kunsten</title>
        <style>
            a { text-decoration: none;}
        </style>
    </head>
    <body bgcolor="#000000">

        <table align="center" width="100%" border="0" bgcolor="#000000">
            <tr>
                <td align="center">

                    <table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#000000">
                        <tr><td height="10" colspan="3"></td></tr>
                        <tr>
                            <td width="10"></td>
                            <td>

                                <table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#fafaf9">
                                    <tr>
                                        <td height="151" width="600" align="right" valign="top" background="img/header.jpg">
                                            <!--[if gte mso 9]>
                                            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:151px; width:600px;top:0;left:0;border:0;z-index:1;' src="img/header.jpg"/>
                                            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:151px; width:600px;top:0;left:233;border:0;z-index:2;'>
                                            <div>
                                            <![endif]-->
                                            <table width="357">
                                                <tr>
                                                    <td align="right">
                                                            <a href="http://www.hklimburg.nl/nieuwsbrief.html" style="text-decoration:none !important; font-weight: normal; color: #000000;">
                                                                 doorsturen
                                                            </a>
                                                            |<a href="http://www.hklimburg.nl/nieuwsbrief.html" style="text-decoration:none !important; font-weight: normal; color: #000000;">
                                                                 wijzigen
                                                            </a>
                                                            |<a href="http://www.hklimburg.nl/nieuwsbrief.html" style="text-decoration:none !important; font-weight: normal; color: #000000;">
                                                                 opzeggen
                                                            </a>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td align="left">
                                                        <br/>
                                                        <font style="font-family:Tahoma; font-weight: bold; font-size:10pt; color:#000000; text-decoration:none;"><!--MAINTITLE-->nieuwsbrief titel<!--MAINTITLE--></font><br/>
                                                        <font style="font-family:Tahoma; font-size:10pt; color:#000000; text-decoration:none;"> <!--DATE-->11 april 2011<!--DATE--> </font>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!-- This ends the nested table content -->
                                            <!--[if gte mso 9]>
                                            </div>
                                            </v:shape>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                    <tr><td height="10"></td></tr>
                                    <tr>
                                        <td align="center" valign="top">
                                            <table cellpadding="0" cellspacing="0" border="0" width="600">
                                            <tbody class="sort">
                                                <!-- TEMPLATES -->
                                                <!-- LINK WRAPPER <font style="font-family:Georgia; font-size:11pt; color:#e20916; text-decoration:none;">LINK</font> LINK WRAPPER -->
                                                <!-- SUBTITLE WRAPPER <font style="font-family:Georgia Bold; font-weight: bold; font-size:22pt; color:#000000;">SUBTITLE</font><br /> SUBTITLE WRAPPER -->
                                                <!-- MESSAGE -->
                                                <tr>
                                                    <td align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="580" style="color: #ffffff;">
                                                        <tbody>
                                                            <tr>
                                                                <td class="nosort" width="255" align="right" valign="top">
                                                                    <img src="<!--IMG-->" width="250" height="186" style="display:none;"/>
                                                                </td>
                                                                <td class="nosort" align="center" width="10" valign="top">
                                                                    <table>
                                                                        <tr>
                                                                            <td width="2px" height="186"></td>
                                                                            <td width="3px" height="186" bgcolor="#bfbfbf"><!--DISCIPLINEINDICATOR--></td>
                                                                            <td width="2px" height="186"></td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                                <td valign="top" align="left" width="335">
                                                                    <font style="font-family:Tahoma; font-size:16pt; color:#000000;">
                                                                        <!--TITLE-->Nieuw Bericht<!--TITLE-->
                                                                    </font><br />
                                                                    <font style="font-family:Tahoma; font-size:9pt; color:#000000;">
                                                                        <!--CONTENT--><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere erat eu lectus. Ut ante eros, scelerisque laoreet, porta et, consequat id, erat.</b><br/>    Fusce tellus justo, dignissim id,porta eget, tristique sit amet, arcu. Cras condimentum purus non ligula. Aliquam erat volutpat. Donec tincidunt, velit sit amet tempor cursus, neque justo pellentesque enim, ut facilisis leo eros id mauris. Fusce a justo in tellus laoreet varius. Nullam ornare elit a est. Proin felis erat, tristique quis, scelerisque at, varius nec, odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent feugiat condimentum augue. Vivamus vel ante a augue bibendum hendrerit. Maecenas hendrerit pellentesque sapien. Etiam ac erat. Vestibulum quam est, viverra quis, iaculis vitae, dapibus nec, sapien. Donec consectetur neque et ipsum. Suspendisse potenti. Proin ut elit.<!--CONTENT-->
                                                                    </font>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <!-- MESSAGE -->
                                                <!-- SEPARATOR -->
                                                <tr height="31">
                                                    <td><img src="img/sepline.jpg" height="1" width="600"/></td>
                                                </tr>
                                                <!-- SEPARATOR -->
                                                <!-- TEMPLATES -->
                                            </tbody>
                                            </table>
                                        </td>
                                    </tr>

                                    <tr><td height="12"></td></tr>

                                    <tr>
                                        <td height="136" width="600" background="img/footer.jpg" align="right">
                                            <!--[if gte mso 9]>
                                            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:136px; width:600px;top:0;left:0;border:0;z-index:1;' src="img/footer.jpg"/>
                                            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:136px; width:600px;top:20;left:250;border:0;z-index:2;'>
                                            <div>
                                            <![endif]-->
                                                <table cellpadding="0" cellspacing="0" border="0" width="340" >
                                                    <tr>
                                                        <td valign="top">
                                                            <font style="font-family:Tahoma; font-size:9pt; text-decoration:none; padding-right: 2px; color:#000000;">
                                                                <b>bezoekadres</b><br/>
                                                                kapellerlaan 36<br/>
                                                                6041 JC Roermond<br/>
                                                                <br/>
                                                                <a href="http://www.twitter.com/huisvdkunsten"><img src="img/twitter.jpg" border="0"/></a>
                                                            </font>
                                                        </td>
                                                        <td valign="top">
                                                            <font style="font-family:Tahoma; font-size:9pt; text-decoration:none; padding-right: 2px; color:#000000;">
                                                                <b>postadres</b><br/>
                                                                postbus 203<br/>
                                                                6040 AE Roermond
                                                            </font>
                                                        </td>
                                                        <td valign="top">
                                                            <font style="font-family:Tahoma; font-size:9pt; text-decoration:none; padding-right: 2px; color:#000000;">
                                                                t: 0475 399 299<br/>
                                                                f: 0475 399 298<br/>
                                                                e: <a href="mailto:info@hklimburg.nl"  style="text-decoration:none !important; font-weight: normal; color: #808080;">info@hklimburg.nl</a><br/>
                                                                w: <a href="http://www.hklimburg.nl"  style="text-decoration:none !important; font-weight: normal; color: #808080;">www.hklimburg.nl</a>
                                                            </font>
                                                        </td>
                                                    </tr>
                                                </table>
                                            <!-- This ends the nested table content -->
                                            <!--[if gte mso 9]>
                                            </div>
                                            </v:shape>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                            </td><td width="10"></td></tr>
                        <tr><td height="10" colspan="3"></td></tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
lthode, 2 years ago

I ran into a problem this week. The code works, as in perfectly, but in Outlook 2010 the text wasn't being rendered correctly. I only got the font face/color/size working by wrapping it in a span tag. Has anyone else solved this?
Screenshots are here:
In Outlook2010 - http://images.proflowers.com/6899/rtimages/Personalize/Untitled-1.jpg
In Hotmail - http://images.proflowers.com/6899/rtimages/Personalize/Untitled-2.jpg

Code:
<td width="144" height="139" align="center" valign="bottom" bgcolor="#574319" background="http://images.proflowers.com/rtimages/Personalize/templates/15Percent/MiddleBgCopy.jpg" style="font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:15px; line-height:19px; font-weight:bold; text-align:center; vertical-align:bottom;"><!--[if gte mso 9]>
         <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:139px; width:144px; top:0; left:0; border:0; z-index:1;' src="http://images.proflowers.com/rtimages/Personalize/templates/15Percent/MiddleBgCopy.jpg"/>
         <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:139px; width:144px; top:-5; left:-10; border:0; z-index:2;'>
      <![endif]-->
                              <a href="http://www.personalize.com?REF=%%SOURCE_CD_MON%%&CustId=%%CUSTOMER_ID%%" style="color:#FFFFFF; text-decoration:none;"><span style="font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:15px; line-height:17px; font-weight:bold; vertical-align:bottom;">create personalized<br>
                              holiday cards</span></a>
                              <!--[if gte mso 9]>
         </v:shape>
      <![endif]--></td>

BThies BThies, 2 years ago

@lthode

VML requires a bit of adjusting along with nested tables to work correctly. Also, a <div> tag should be added within the VML code.

This should work:

<td width="144" height="139" bgcolor="#574319" background="http://images.proflowers.com/rtimages/Personalize/templates/15Percent/MiddleBgCopy.jpg">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:139px; width:144px;top:0;left:0;border:0;z-index:1;' src="http://images.proflowers.com/rtimages/Personalize/templates/15Percent/MiddleBgCopy.jpg"/>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:149px; width:149px;top:-5;left:-10;border:0;z-index:2;'>
        <div>
        <![endif]-->
              <table width="144" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td width="144" height="139" valign="bottom"><table width="144" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td width="144"><div align="center" style="font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:15px; line-height:18px;"><strong><a href="http://www.personalize.com?REF=%%SOURCE_CD_MON%%&CustId=%%CUSTOMER_ID%%" style="color:#FFFFFF; text-decoration:none;">create personalized<br style="line-height:100%;" />holiday cards</a></strong></div></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
        <!--[if gte mso 9]>
        </div>
        </v:shape>
        <![endif]-->
    </td>

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 2 years ago

Hi everyone, just to let you know, we've updated our blog post on applying background images to table cells in Outlook 2007/2010. Of note is that we've tested a method that uses v:fill and v:rect instead of v:image in order to cut down on the code.

To take a look at our method and provide feedback and suggestions, swing on by to the post. We're keen to hear what you think!


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

MAJOR UPDATE!!!

Using the slimmed down version provided by Ros, I've found the code that eliminates the need for a height or z-index in the VML object.  This allows the background to repeat based on the height of the contents, and background colors no longer cause any z-index issues.

Example code below (uses a 600x150 placeholder image):

 <table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td bgcolor="#dddddd" background="http://placehold.it/600x150" width="600" valign="top">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:600px">
                <v:fill type="tile" src="http://placehold.it/600x150" /></v:fill>
                <v:textbox style="mso-fit-shape-to-text:true">
                <![endif]-->
                  <table width="600" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td width="600" height="40"></td>
                    </tr>
                    <tr>
                      <td width="600"><p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p>
                        <p style="color:#ff0000; margin-top:0px; margin-bottom:15px;">If you can see this over the image, background images are successful.</p></td>
                    </tr>
                    <tr>
                      <td width="600" height="40"></td>
                    </tr>
                  </table>
                  <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
                </td>
              </tr>
            </table>

Enjoy the early Xmas present!


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
wilbertheinen wilbertheinen, 2 years ago

Thanks guys! I'm trying to use background-images in combination with fluid design for mobile devices, maybe this will solve some problems!


Create a Clang!
Bert, 2 years ago

Help!

Ok, I've followed the instructions here as best I can (including the very latest method posted a few hours back and also the blog version) and I can't get images to display in outlook 2007 (not sure about 2010 but I assume it is the same).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Christmas Luncheon</title>


<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, img {
    display: block;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body{
    line-height: 1;
    background:#ebebec;
}
.top td p{
    font-family:arial, sans-serif;
    font-size:11px;
    color:#888888;
}
.top td p span{
    text-decoration:underline; 
    font-weight:bold;
}

v:* { 
    behavior: url(#default#VML); display: inline-block; 
}

.picture p{
    margin-bottom:155px;
}

.picture .styleOne{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:0 0 10px 0;
    color:#252525 !important;
    text-align:center;
}

.picture .styleTwo {
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:normal;
    text-align:center;
    margin:0 0 25px 0;
    color:#252525 !important;
    text-align:center;
}

.picture .styleThree{
    font-family:georgia, sans-serif;
    font-size:24px;
    font-weight:normal;
    font-style:italic;
    text-align:center;
    color:#707070 !important;
    text-align:center;
}

.luncheon .styleFour{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:0 0 10px 0;
    color:#252525 !important;
    text-align:center;
}

.luncheon .styleFive{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:normal;
    text-align:center;
    margin:0 0 32px 0;
    color:#252525 !important;
    text-align:center;
}

.luncheon .styleSix{
    font-family:georgia, sans-serif; 
    font-size:22px; 
    font-weight:normal; 
    font-style:italic; 
    text-align:center; 
    margin: 0 0 5px 0; 
    color:#707070 !important;
    text-align:center;
}

.luncheon .styleSeven{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:35px 0 20px 0;
    color:#ea2c2d !important;
    text-align:center;
}

.luncheon .styleSeven a, .styleSeven a:hover, .styleSeven a:visited{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:35px 0 20px 0;
    color:#ea2c2d !important;
    text-decoration:underline;
}

.luncheon p{
    font-family:arial, sans-serif;
    font-size:11px;
    color:#939598;
    text-align:center;
}

.excellence td{
    padding:55px 0 0 0;
}

.excellence p{
    margin:15px 0 0 0px;
}

.excellence .black{
    font-family:arial, sans-serif;
    font-size:16px;
    color:#010101;
}

.excellence .grey{
    font-family:arial, sans-serif;
    font-size:16px;
    color:#888888;
}

.excellence .red{
    font-family:arial, sans-serif;
    font-size:16px;
    color:#ea2c2d;
}

.excellence a, .excellence a:hover, .excellence a:visited{
    font-family:arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#ea2c2d;
    text-decoration:none;
}

.unsub{
    padding:0 0 35px 0;
}

.unsub p{
    font-family:arial,sans-serif;
    font-size:10px;
    padding:15px 0 0 0;
    color:#444545;
    text:decoration:none;    
}

.unsub a, .unsub a:hover, .unsub a:visited{
    font-family:arial,sans-serif;
    font-size:10px;
    padding:10px 0 0 0;
    color:#444545;
    text:decoration:none;
}

</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" bgcolor="#ebebec">
            <table width="590" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="590" align="center" valign="top">
                        <table class="top" width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                            
                                <td width="100%" align="left" valign="top" bgcolor="#ececec" style="padding:10px 0;">
                                    
                                    <p style="font-family:arial, sans-serif;font-size:11px;color:#888888">If you have problems viewing this email, you can <span style="text-decoration:underline; font-weight:bold;">view it as a web page</span></p>

                                </td>
                                    
                            </tr>
                        </table>
                        
                        <table width="590" cellpadding="0" cellspacing="0" border="0">
                          <tr>
                            <td bgcolor="#ffffff" background="http://placehold.it/590x285" width="590" valign="top">
                            <!--[if gte mso 9]>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:590px">
                            <v:fill type="tile" src="http://placehold.it/590x285" /></v:fill>
                            <v:textbox style="mso-fit-shape-to-text:true">
                            <![endif]-->
                              <table width="590" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                  <td width="590" height="155"></td>
                                </tr>
                                <tr>
                                  <td width="590">
                                    <h1 class="styleOne" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:bold; text-align:center; margin:0 0 10px 0; color:#252525 !important;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
                                    <h2 class="styleTwo" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:normal; text-align:center; margin:0 0 30px 0; color:#252525 !important;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3> 
                                    <h3 class="styleThree" align="center" style="font-family:georgia, sans-serif; font-size:24px; font-weight:normal; font-style:italic; text-align:center; color:#707070 !important;">Lorem Ipsum</h2>
                                </tr>
                                <tr>
                                  <td width="590" height="30"></td>
                                </tr>
                              </table>
                              <!--[if gte mso 9]>
                              </v:textbox>
                              </v:rect>
                              <![endif]-->
                            </td>
                          </tr>
                        </table>
                        
                        <table class="luncheon" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
                                
                                <td valign="top" bgcolor="#ffffff">
                                    <h1 class="styleFour" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:bold; text-align:center; margin:0px 0 10px 0; color:#252525;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> 
                                    <h2 class="styleFive" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:normal; text-align:center; margin:0 0 32px 0; color:#252525;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                                    <h3 class="styleSix" style="font-family:georgia, sans-serif; font-size:22px; font-weight:normal; font-style:italic; text-align:center; margin: 0 0 5px 0; color:#707070;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3> 
                                    <h3 class="styleSix" style="font-family:georgia, sans-serif; font-size:22px; font-weight:normal; font-style:italic; text-align:center; margin: 0 0 5px 0; color:#707070;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                                    <h2 class="styleSeven" align="center" style="font-family:arial, sans-serif;    font-size:15px;    font-weight:bold; text-align:center; margin:35px 0 20px 0; color:#ea2c2d; text-align:center;" >Please <a style="font-family:arial, sans-serif; font-size:15px; font-weight:bold; color:#ea2c2d; text-decoration:underline;" href="">click here</a> to RSVP</h2>
                                    <p align="center" style="font-family:arial, sans-serif;    font-size:11px;    color:#939598; text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <singleline></singleline> <multiline></multiline> <img editable="true" width="20"/>
                                    
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
                                
                            </tr>
                        </table>
                        
                        <table class="excellence" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>

                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>

                                <td align="left" valign="baseline" bgcolor="#ffffff">
                        
                                    <p style="margin:15px 0 0 0px;"><span class="black" style="font-family:arial, sans-serif;font-size:16px;color:#010101;" >Lorem</span> <span class="grey" style="font-family:arial, sans-serif;font-size:16px; color:#888888;">Lorem</span> <span class="red" style="font-family:arial, sans-serif;font-size:16px;color:#ea2c2d;">lorem</span></p>
                            
                                </td>
                                
                                <td align="right" valign="baseline" bgcolor="#ffffff">
                                    <a style="font-family:arial, sans-serif;font-size:13px; font-weight:bold; color:#ea2c2d; text-decoration:none;" href="http://www.google.ie/">www.google.ie</a>
                                </td>

                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>                                

                            </tr>
                        </table>
                        
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                        
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
            
                                <td width="542" height="10" bgcolor="#ffffff">

                                    <img src="http://placehold.it/542x20" width="542" height="10"/>
                                
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
    
                            </tr>
                        
                        </table>    
                        
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        
                            <tr>
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                        
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
                                
                                <td width="542" align="right" bgcolor="#ffffff">
                                
                                    <p style="font-family:arial, sans-serif;font-size:11px; font-weight:bold; color:#888888; margin:15px 0;">Lorem &nbsp;&nbsp;&nbsp;&nbsp; Lorem &nbsp;&nbsp;&nbsp;&nbsp; Lorem &nbsp;&nbsp;&nbsp;&nbsp; Lorem</p>
                                    
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>

                            </tr>
                            
                        </table>
                        
                        <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                        
                            <tr>
                                <td class="unsub" width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                        
                                <td class="unsub" width="20" valign="top" bgcolor="#ececec">
                                    &nbsp;
                                </td>
                                
                                <td class="unsub" width="542" align="left" bgcolor="#ececec" style="padding:0 0 35px 0;">
                                
                                    <unsubscribe><p style="    font-family:arial,sans-serif; font-size:10px; padding:15px 0 0 0; color:#444545; text:decoration:none;">Unsubscribe ></p></unsubscribe> 
                                    
                                </td>
                                
                                <td class="unsub" width="20" valign="top" bgcolor="#ececec">
                                    &nbsp;
                                </td>

                            </tr>
                            
                        </table>

                        
                    </td>
                </tr>
            </table>                    
        </td>
    </tr>
</table>
</body>
</html>
BThies BThies, 2 years ago

@Bert

Few things:
• You have your closing </h2> and </h3> switched on lines 234/235
• You're missing a closing </td> on line 236
• You have an extra > bracket on line 368.  Should be &gt;


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
Bert, 2 years ago

Yeah, I noticed the h2/ h3 and td issue after I had posted. I really should have checked my mark-up more thoroughly. Anyway, I've sorted out the above issues but the image still isn't being displayed in Outlook 07. I assume it is something quite small but I just can't figure it out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Christmas Luncheon</title>


<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, img {
    display: block;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body{
    line-height: 1;
    background:#ebebec;
}
.top td p{
    font-family:arial, sans-serif;
    font-size:11px;
    color:#888888;
}
.top td p span{
    text-decoration:underline; 
    font-weight:bold;
}

v:* { 
    behavior: url(#default#VML); display: inline-block; 
}

.picture p{
    margin-bottom:155px;
}

.picture .styleOne{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:0 0 10px 0;
    color:#252525 !important;
    text-align:center;
}

.picture .styleTwo {
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:normal;
    text-align:center;
    margin:0 0 25px 0;
    color:#252525 !important;
    text-align:center;
}

.picture .styleThree{
    font-family:georgia, sans-serif;
    font-size:24px;
    font-weight:normal;
    font-style:italic;
    text-align:center;
    color:#707070 !important;
    text-align:center;
}

.luncheon .styleFour{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:0 0 10px 0;
    color:#252525 !important;
    text-align:center;
}

.luncheon .styleFive{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:normal;
    text-align:center;
    margin:0 0 32px 0;
    color:#252525 !important;
    text-align:center;
}

.luncheon .styleSix{
    font-family:georgia, sans-serif; 
    font-size:22px; 
    font-weight:normal; 
    font-style:italic; 
    text-align:center; 
    margin: 0 0 5px 0; 
    color:#707070 !important;
    text-align:center;
}

.luncheon .styleSeven{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:35px 0 20px 0;
    color:#ea2c2d !important;
    text-align:center;
}

.luncheon .styleSeven a, .styleSeven a:hover, .styleSeven a:visited{
    font-family:arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin:35px 0 20px 0;
    color:#ea2c2d !important;
    text-decoration:underline;
}

.luncheon p{
    font-family:arial, sans-serif;
    font-size:11px;
    color:#939598;
    text-align:center;
}

.excellence td{
    padding:55px 0 0 0;
}

.excellence p{
    margin:15px 0 0 0px;
}

.excellence .black{
    font-family:arial, sans-serif;
    font-size:16px;
    color:#010101;
}

.excellence .grey{
    font-family:arial, sans-serif;
    font-size:16px;
    color:#888888;
}

.excellence .red{
    font-family:arial, sans-serif;
    font-size:16px;
    color:#ea2c2d;
}

.excellence a, .excellence a:hover, .excellence a:visited{
    font-family:arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#ea2c2d;
    text-decoration:none;
}

.unsub{
    padding:0 0 35px 0;
}

.unsub p{
    font-family:arial,sans-serif;
    font-size:10px;
    padding:15px 0 0 0;
    color:#444545;
    text:decoration:none;    
}

.unsub a, .unsub a:hover, .unsub a:visited{
    font-family:arial,sans-serif;
    font-size:10px;
    padding:10px 0 0 0;
    color:#444545;
    text:decoration:none;
}

</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" bgcolor="#ebebec">
            <table width="590" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="590" align="center" valign="top">
                        <table class="top" width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                            
                                <td width="100%" align="left" valign="top" bgcolor="#ececec" style="padding:10px 0;">
                                    
                                    <p style="font-family:arial, sans-serif;font-size:11px;color:#888888">If you have problems viewing this email, you can <span style="text-decoration:underline; font-weight:bold;">view it as a web page</span></p>

                                </td>
                                    
                            </tr>
                        </table>
                        
                        <table width="590" cellpadding="0" cellspacing="0" border="0">
                          <tr>
                            <td bgcolor="#ffffff" background="http://placehold.it/590x285" width="590" valign="top">
                            <!--[if gte mso 9]>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:590px">
                            <v:fill type="tile" src="http://placehold.it/590x285" /></v:fill>
                            <v:textbox style="mso-fit-shape-to-text:true">
                            <![endif]-->
                              <table width="590" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                  <td width="590" height="155"></td>
                                </tr>
                                <tr>
                                    <td width="590">
                                        <h1 class="styleOne" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:bold; text-align:center; margin:0 0 10px 0; color:#252525 !important;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
                                        <h2 class="styleTwo" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:normal; text-align:center; margin:0 0 30px 0; color:#252525 !important;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> 
                                        <h3 class="styleThree" align="center" style="font-family:georgia, sans-serif; font-size:24px; font-weight:normal; font-style:italic; text-align:center; color:#707070 !important;">Lorem Ipsum</h3>
                                    </td>
                                </tr>
                                <tr>
                                  <td width="590" height="30"></td>
                                </tr>
                              </table>
                              <!--[if gte mso 9]>
                              </v:textbox>
                              </v:rect>
                              <![endif]-->
                            </td>
                          </tr>
                        </table>
                        
                        <table class="luncheon" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
                                
                                <td valign="top" bgcolor="#ffffff">
                                    <h1 class="styleFour" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:bold; text-align:center; margin:0px 0 10px 0; color:#252525;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> 
                                    <h2 class="styleFive" align="center" style="font-family:arial, sans-serif; font-size:15px; font-weight:normal; text-align:center; margin:0 0 32px 0; color:#252525;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                                    <h3 class="styleSix" style="font-family:georgia, sans-serif; font-size:22px; font-weight:normal; font-style:italic; text-align:center; margin: 0 0 5px 0; color:#707070;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3> 
                                    <h3 class="styleSix" style="font-family:georgia, sans-serif; font-size:22px; font-weight:normal; font-style:italic; text-align:center; margin: 0 0 5px 0; color:#707070;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                                    <h2 class="styleSeven" align="center" style="font-family:arial, sans-serif;    font-size:15px;    font-weight:bold; text-align:center; margin:35px 0 20px 0; color:#ea2c2d; text-align:center;" >Please <a style="font-family:arial, sans-serif; font-size:15px; font-weight:bold; color:#ea2c2d; text-decoration:underline;" href="">click here</a> to RSVP</h2>
                                    <p align="center" style="font-family:arial, sans-serif;    font-size:11px;    color:#939598; text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <singleline></singleline> <multiline></multiline> <img editable="true" width="20"/>
                                    
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
                                
                            </tr>
                        </table>
                        
                        <table class="excellence" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>

                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>

                                <td align="left" valign="baseline" bgcolor="#ffffff">
                        
                                    <p style="margin:15px 0 0 0px;"><span class="black" style="font-family:arial, sans-serif;font-size:16px;color:#010101;" >Lorem</span> <span class="grey" style="font-family:arial, sans-serif;font-size:16px; color:#888888;">Lorem</span> <span class="red" style="font-family:arial, sans-serif;font-size:16px;color:#ea2c2d;">lorem</span></p>
                            
                                </td>
                                
                                <td align="right" valign="baseline" bgcolor="#ffffff">
                                    <a style="font-family:arial, sans-serif;font-size:13px; font-weight:bold; color:#ea2c2d; text-decoration:none;" href="http://www.google.ie/">www.google.ie</a>
                                </td>

                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>                                

                            </tr>
                        </table>
                        
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                        
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
            
                                <td width="542" height="10" bgcolor="#ffffff">

                                    <img src="http://placehold.it/542x20" width="542" height="10"/>
                                
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
    
                            </tr>
                        
                        </table>    
                        
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        
                            <tr>
                                <td width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                        
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>
                                
                                <td width="542" align="right" bgcolor="#ffffff">
                                
                                    <p style="font-family:arial, sans-serif;font-size:11px; font-weight:bold; color:#888888; margin:15px 0;">Lorem &nbsp;&nbsp;&nbsp;&nbsp; Lorem &nbsp;&nbsp;&nbsp;&nbsp; Lorem &nbsp;&nbsp;&nbsp;&nbsp; Lorem</p>
                                    
                                </td>
                                
                                <td width="20" valign="top" bgcolor="#ffffff">
                                    &nbsp;
                                </td>

                            </tr>
                            
                        </table>
                        
                        <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                        
                            <tr>
                                <td class="unsub" width="7" valign="top" bgcolor="#ebebec" >
                                    &nbsp;
                                </td>
                        
                                <td class="unsub" width="20" valign="top" bgcolor="#ececec">
                                    &nbsp;
                                </td>
                                
                                <td class="unsub" width="542" align="left" bgcolor="#ececec" style="padding:0 0 35px 0;">
                                
                                    <unsubscribe><p style="    font-family:arial,sans-serif; font-size:10px; padding:15px 0 0 0; color:#444545; text:decoration:none;">Unsubscribe &gt;</p></unsubscribe> 
                                    
                                </td>
                                
                                <td class="unsub" width="20" valign="top" bgcolor="#ececec">
                                    &nbsp;
                                </td>

                            </tr>
                            
                        </table>

                        
                    </td>
                </tr>
            </table>                    
        </td>
    </tr>
</table>
</body>
</html>
BThies BThies, 2 years ago

Using your code it's appearing fine on this side.  The background image should appear as a gray box with the darker gray image size in the center.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
Bert, 2 years ago

Humm... that is odd! I'm actually getting someone to check it for me and forward me the screen shots because I don't happen to have Outlook 2007 handy. Perhaps this is the problem.

Generator, 2 years ago

*UPDATE 02 - Eureka! Fixed. I've updated the code below (removed the v:textbox style) to reflect what's working for me!!!!! Hope it helps someone out there :D

*UPDATE 01 - I've fixed the centering. I also added height 26 to the v:rect and changed v:fill type to frame. Issue to solve now is that the td height declaration seems to be ignored, the td looks to be about double the specified height - and the bg image is stretched to fit.

I'm soooo close to getting this to work ... having finally understood the background images has to be self-hosted.

Using Brian's MAJOR UPDATE code above the image is showing, however I don't need it to tile - I need it to respect the H and W declarations and maintain the centering of the contained table (which it isn't at the moment).

Hope someone can help - it's probably something simple I've overlooked:

<td align="center" background="images/header-hero-nav.jpg" style="background-image: url('images/header-hero-nav.jpg');" height="26" width="600" bgcolor="#2e455b">
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:600px;height:26px">
    <v:fill type="frame" src="http://www.mydomain.com.au/enews/images/header-hero-nav.jpg" /></v:fill>
    <v:textbox>
    <![endif]-->
    <table border="0"  align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" class="menu"><a href="#">Link</a></td>
        <td align="center" class="menu"><a href="#">Link</a></td>
        <td align="center" class="menu"><a href="#">Link</a></td>
        <td align="center" class="menu"><a href="#">Link</a></td>
        <td align="center" class="menu"><a href="#">Link</a></td>
      </tr>
    </table>
    <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
    <![endif]-->
    </td>

PS - campaign is due out this morning. No rush then.....

sglessard, 2 years ago

Links (<a> tags) inside the <v:shape> element are not clickable in Outlook 2007 (12.0...), are they?
Even if the cursor shows the "pointer" state, clicking on them does nothing.

<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:168px; width:432px;top:0;left:0;border:0;z-index:1;' src="http://www.example.com/background.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:178px; width:442px;top:-12px;left:-2px;border:0;z-index:2;'>
    <p style="margin:0; padding:0; font-size:12px; line-height:17px; font-family: Arial, sans-serif; text-align:left;color: #78848f;">
<![endif]-->

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.
<br />
Lorem <a href="http://http://www.lipsum.com/" title="Does nothing in Outlook 2007">ipsum dolor</a> 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.

<!--[if gte mso 9]>
</p>
</v:shape>
<![endif]-->
GLabelle, 2 years ago

Hi!
First, I want to thank you for this solution. It is quite simple and I'm sure it will be useful for my future projects.
Sadly, I have an issue with Outlook 2010, that I will try to explain the best I can (english is not my first language).
So I have three <td>, two empty and one with an image. Outlook seems to substract 20px from the width of my empty <td>.
I set a width for each of them: 484px, 130px and 86px. But Outlook output them like so: 468px, 130px and 82px.
Here is a screenshot of my email, I left only the three <td> and I gave them background color, since they are empty. I also outlined my background image to help you see the gap on each side.
http://htag.quatrecentquatredev.com/assets/img/boiler/example1.jpg
I found a work around though: I gave a width of 720px to the v:rect and v:shape tag. But with the adjustement of top:-5px and left:-15px that I have to make, It became a bit messy (see second screen shot).
http://htag.quatrecentquatredev.com/assets/img/boiler/example2.jpg
I'm I the only one with this issue? I know it's not a big deal, but still. If my boss or client compare it with other mail clients, or with the PSD, he will see the difference.

Here is my code.
Any help will be appreciated. Thank you!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Your Message Subject or Title</title>
    <style type="text/css">
        .ExternalClass {width:100%;}
        .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 td {border-collapse:collapse;}
        p {margin:0; padding:0; margin-bottom:0;}
        h1, h2, h3, h4, h5, h6 { color: black;line-height: 100%;}
        a, a:link {color:#2A5DB0;text-decoration: underline;}
        body, #body_style {  background:#fff; min-height:555px; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
        a:visited { color: #3c96e2; text-decoration: none}
        a:focus   { color: #3c96e2; text-decoration: underline}
        a:hover   { color: #3c96e2; text-decoration: underline}
        @media only screen and (max-device-width: 480px) { }
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)  {}
    </style>
</head>
<body style="background:#fff; min-height:555px; color:#000;font-family:Arial, Helvetica, sans-serif; font-size:12px" alink="#FF0000" link="#FF0000" bgcolor="#fff" text="#000" yahoo="fix">
<div id="body_style">
    <table width="700" height="25" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center" style="color:#7f8288; font-family:'Arial', 'Helvetica',sans-serif; font-size:11px;">
        <tr>
            <td>To view images, click the download images link.</td>
        </tr>
    </table>
    <table width="700" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" align="center">
        <tr style="vertical-align: top;">
            <td width="100%" height="554" background="http://htag.quatrecentquatredev.com/assets/img/boiler/background-forum.jpg" style="background-image: url('http://htag.quatrecentquatredev.com/assets/img/boiler/background-forum.jpg'); text-align: left;">
                <!--[if gte mso 9]>
                <v:rect style="width:720px;height:554px;" strokecolor="none">
                    <v:fill type="frame" src="http://htag.quatrecentquatredev.com/assets/img/boiler/background-forum.jpg" /></v:fill>
                </v:rect>
                <v:shape id="theText" style="position:absolute;width:720px;height:554px; top:-5px;left:-15px;">
                <![endif]-->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" >
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td width="484" height="120" bgcolor="#ffd700"></td><td bgcolor="green"><a href="http://hashtagholidays.words-matter.ca/" target="_blank"><img src="http://htag.quatrecentquatredev.com/assets/img/boiler/cta-blank.png" alt="Click to play" width="130" height="120" style="display: block;" border="0"></a></td><td width="86" height="120" bgcolor="#daa520"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!--[if gte mso 9]>
                </v:shape>
                <![endif]-->
            </td>
        </tr>
    </table>
</div> <!--end wrapper-->
</body>
</html>
darnson, 2 years ago

I would like to Thank You in advance for all the great tips. I'm new at this so bare with me. I have a template I designed and tried to follow the snippets. The backgrounds in the body and in the tables are not showing up? I'm tired of pulling my hair out for the last couple of days. Can you show me what I'm doing wrong and how do I post the source CODE?

roshodgekiss roshodgekiss, 2 years ago

Hi darnson, welcome to the forums! Mind me asking, did you add the <html xmlns:v="urn:schemas-microsoft-com:vml"> to the head?

To post code here, add [ code ] [ /code ] (remove the spaces) around your HTML and it will get formatted nicely. Have a happy new year! :D


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

Hello roshodgekiss,

Yes, I believe I did add the snippet.

Here is my code hopefully i get it the first time. Very Happy New year too you also!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SA2012EM</title>
<style type="text/css">
<!--
.style24 {
    font-family: Arial;
    font-size: 14px;
    color: #505050;
}
.style28 {
    font-family: Arial;
    font-size: 18px;
}
.style31 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
.style32 {font-family: Arial, Helvetica, sans-serif}
.style33 {font-family: "Arial Narrow"}
.style34 {font-family: Arial}
.style38 {font-family: "Courier New", Courier, monospace; font-weight: bold; }
.style42 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.style46 {
    font-size: 9px;
    font-family: "Arial Narrow";
}
.style47 {color: #000000}
.style48 {color: #666666}
.style49 {color: #333333}
.style50 {font-family: Georgia, "Times New Roman", Times, serif}
.style52 {
    font-family: "Times New Roman", Times, serif;
    font-size: 10;
}
.style53 {
    color: #006699;
}
-->
</style>
<body style="margin:0; padding:0; width:100% !important;">
<!--[if gte mso 9]>
<v:background fill="t">
   <v:fill type="tile" src="http://i775.photobucket.com/albums/yy31/darnsonpsi/damaskwht" />
</v:background>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" background=http://i775.photobucket.com/albums/yy31/darnsonpsi/damaskwht.jpg>
    <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td><p class="style31">Is this email not displaying correctly?<br />
              <a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.</p>
            <div>
              <div>
                <div align="right" class="style31"><span class="style49">&nbsp;<a href="*|TWITTER:PROFILEURL|*">follow on Twitter </a><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/Tamixes_twitter.png" alt="" width="24" height="24" align="absmiddle" /><a href="*|FACEBOOK:PROFILEURL|*"> friend on Facebook </a><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/Tamixes_facebook.png" alt="" width="24" height="24" align="absmiddle" /><a href="*|FORWARD|*"> forward to a friend</a></span>&nbsp;                                                            </div>
              </div>
            </div>
            <table width="600" border="2" align="center" cellpadding="5" cellspacing="5" bordercolor="#99CFD9">
  <tr>
    <!-- Backup background color is #DDDDDD -->
    <td style="background-image: http://i775.photobucket.com/albums/yy31/darnsonpsi/MO918Asmal.jpg;" background=http://i775.photobucket.com/albums/yy31/darnsonpsi/MO918Asmal.jpg width="600" height="120" valign="top">
    <!--[if gte mso 9]>
       <v:rect style="width:600px;height:120px;" strokecolor="none">
          <v:fill type="tile" src="http://i775.photobucket.com/albums/yy31/darnsonpsi/damaskwht" /></v:fill>
       </v:rect>
       <v:shape id="theText" style="position:absolute;width:600px;height:120px;">
       <![endif]-->
    <table width="460" border="2" align="center" cellpadding="2" cellspacing="2" bordercolor="#F1F1EF">
      <tr>
        <th scope="col"><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/2011SAbanner.jpg" alt="" width="460" height="78" align="absmiddle" /></th>
      </tr>
    </table>
    <table width="460" border="2" align="center" cellpadding="2" cellspacing="2" bordercolor="#F1F1EF">
      <tr>
        <th scope="col"><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/SusanAllen-Holiday2011.jpg" alt="" width="460" height="460" align="absmiddle" /></th>
      </tr>
    </table>
    <table width="560" border="2" align="center" cellpadding="1" cellspacing="3" bordercolor="#F0F0F0">
      <tr>
        <th bgcolor="#FFFFFF" scope="row"><div align="justify">
          <blockquote>
            <p><a href="#" class="style28" style="color:#5bc0d3;">Dear Friends!</a>
            <div align="left" class="style24"> 
              <p><span style="margin:0 0 25px 0;"><span class="style32"><span class="style33"><span class="style34"><span class="style38">With each passing Holiday Season I would like to remind YOU  that my thoughts turn gratefully to those who have made my success and progress possible!</span></span></span></span></span><span class="style38"><br>
                  <br>
                I hope YOU enjoy the festive season with FAMILY &amp; FRIENDS. May you be blessed with much JOY, HEALTH, and PROSPERITY into the New Year.</span></p>
              <p><span class="style38">All my best...Susan Allen &amp; Rosey,</span><span class="style32">&nbsp;</span><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/Image7.png" alt="" width="36" height="36" align="absmiddle" /></p>
            </div>
          </blockquote>
        </div></th>
      </tr>
    </table>
    <table width="560" border="2" align="center" cellpadding="1" cellspacing="3" bordercolor="#999999">
      <tr>
        <th width="104" scope="col"><div align="center"><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/9502-10a.jpg" alt="" width="103" height="158" align="absmiddle" /></div></th>
        <th width="475" scope="col"><div align="center">
          <p align="left"><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/sa-logosm.png" alt="" width="130" height="92" align="absmiddle" /><span class="style50">Visit Us at <a href="http://www.susanallen.com" class="style47">www.susanallen.com</a></span></p>
          <p align="center" class="style42"><span class="style52">Susan Allen &amp; Associates | C: 310.704.0815 | E: <a href="mailto:susan@susanallen.com" class="style53">susan@susanallen.com</a></span> </p>
        </div></th>
                    </tr>
                  </table>
                                                        <p align="center" class="style31"><span class="style46"><span class="style48">Keller Williams Realty | 4446 Admiralty Way | Marina del Rey | CA 90406 | <strong>P:</strong>310-305-8333 | <strong>F:</strong>310-531-7307 | DRE#</span> <a href="http://www2.dre.ca.gov/PublicASP/pplinfo.asp?License_id=01372363">01372363</a></span></p>
                  </div></th>
      </tr>
    </table>
    <!--[if gte mso 9]>
       </v:shape>
    <![endif]--></td>
  </tr>
</table> � </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
    </td>
  </tr>
</table>    </td>
  </tr>
<</table>
</body>
darnson, 2 years ago

I kinda like the below layout a bit better and haven't inserted the <html xmlns:v="urn:schemas-microsoft-com:vml"> to the head snippet yet since in didn't work in the first layout.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
.style12 {    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    color: #555555;
}
.style13 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #555555;
    font-weight: bold;
}
.style14 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10px;
}
.style15 {color: #0099FF}
.style46 {    font-size: 9px;
    font-family: "Arial Narrow";
}
.style48 {color: #666666}
.style16 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #555555; }
.style18 {
    font-size: 9px;
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
}
.style19 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
}
-->
</style>
</head>

<body>
<table width="800" border="1" align="center" cellpadding="1" cellspacing="10" bordercolor="#a1dbe9">
  <tr>
    <th width="449" scope="row"><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/saRosey2012holiday.jpg" width="448" height="455"></th>
    <td width="392"><blockquote>
      <p align="justify" class="style13">DEAR FRIENDS,</p>
      <p align="left" class="style16">With each passing Holiday Season I would like to remind YOU that my thoughts turn gratefully to those who have made my success and progress possible! </p>
      <p align="left" class="style16">I hope YOU enjoy the festive season with FAMILY & FRIENDS. May you be blessed with much JOY, HEALTH, and PROSPERITY into the New Year. </p>
      <p align="left" class="style12"><span class="style19">All my best...Susan Allen & Rosey,<img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/Image7.png" width="36" height="36" align="right"></span></p>
    </blockquote></td>
  </tr>
</table>
<table width="800" border="3" align="center" cellpadding="1" cellspacing="10" bordercolor="#a1dbe9">
  <tr>
    <th bgcolor="#a1dbe9" scope="row"><div align="left">
      <blockquote>
        <p align="left"><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/9502-10a.jpg" width="103" height="158" border="2" align="middle"><img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/sa-logosm.png" width="130" height="92" align="middle"><span class="style14">visit us at <a href="http://susanallen.yourkwagent.com/" class="style15"> www.susanallen.com</a> | C:310.704.0815 | E:<a href="mailto:susan@susanallen.com" class="style15">susan@susanallen.com</a></span></p>
        <p align="center"> <span class="style18"><u>follow on twitter</u></span> <img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/Tamixes_twitter.png" width="24" height="24" align="middle"> <u><span class="style18">friend us on facebook</span></u> <img src="http://i775.photobucket.com/albums/yy31/darnsonpsi/Tamixes_facebook.png" width="24" height="24" align="middle"></p>
        <p align="center"><span class="style46"><span class="style48">Keller Williams Realty | 4446 Admiralty Way | Marina del Rey | CA 90406 | <strong>P:</strong>310-305-8333 | <strong>F:</strong>310-531-7307 | DRE#</span> <a href="http://www2.dre.ca.gov/PublicASP/pplinfo.asp?License_id=01372363">01372363</a></span> </p>
      </blockquote>
    </div></th>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 2 years ago

Hi darnson, you're almost there - the problem isn't so much the background image code in the first sample, as misspelt file paths. You also have to include that header VML declaration. Try:

- adding the background image code to your new layout (including the <html xmlns:v="urn:schemas-microsoft-com:vml"> to the header)
- In your original background image VML code, I see both instances of <v:fill type="tile" src="http://i775.photobucket.com/albums/yy31/darnsonpsi/damaskwht" /> have left the .jpg off the file URL. In the second VML snippet, you should be using http://i775.photobucket.com/albums/yy31/darnsonpsi/MO918Asmal.jpg; instead of http://i775.photobucket.com/albums/yy31/darnsonpsi/damaskwht

Once you've made these tweaks, the background images should show up in the cells. If you come across any further issues, make sure you compare your code to the sample in the blog post, as well as ensure all your image file paths are valid. Have a happy new year yourself! :D


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

Hello Everybody!
I'm new here and what brought me here was of course an invisible background image in a newsletter.

Well I tried various solutions, including the ones above and the one on this page http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/.

Nothing works AT ALL. But I am using Windows live mail, since Outlook express seems to have been replaced by that and I dont't have microsoft office.

Does anyone know if these solutions work with Windows live mail?

After many failed attempts I trimmed the mail down to this, which I think is the bare minimum version (from the page I linked to):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
</head>
<body style="margin:0; padding:0; width:100% !important;">

<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- Backup background color is #DDDDDD -->
    <td bgcolor="#DDDDDD" style="background-image: url('http://www.example.com/background_image.jpg');" background="http://www.example.com/background_image.jpg" width="600" height="449" valign="top">
    <!--[if gte mso 9]>
       <v:rect style="width:600px;height:449px;" strokecolor="none">
          <v:fill type="tile" src="http://www.example.com/background_image.jpg" /></v:fill>
       </v:rect>
       <v:shape id="theText" style="position:absolute;width:600px;height:449px;">
       <![endif]-->
    <p>If you can see this over the image, background images are successful.</p>
    <!--[if gte mso 9]>
       </v:shape>
    <![endif]--></td>
  </tr>
</table> 
</body>
</html>

Is this supposed to work? Because for me it doesn't.
I am using thunderbird to send the html mails and Windows live mail on win 7 to view them.
Any Help would be greatly appreciated.
**UPDATE**
sorry guys I figured it out - Windows live mail has a security option which by default blocks all external pics without notification - once I switched that off, everything was fine.
Anybody knows if I can expect Outlook to display a newsletter the same way it shows in Windows live mail?
Thanks for all the good work by the way!

best regards,
Patric

OtherRob, 2 years ago

Hello. I've been using the v:image method of adding background images to Outlook 2007 for a little while now, but when I try to use the newer method with v:rect and v:fill, I can't get the background color to show up in the table cell when images are turned off. The background color of the cell is white instead of the gray I'd like. I've tried adding a background color in various places, but I can't get it to work.

Any help would be greatly appreciated. :-)

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<tr valign="top"><td height="250" bgcolor="#e6e6e6">
<p>This table cell does not have a background image. The background color shows up in Outlook 2007.</p>
</td>
<td width="310" height="275" bgcolor="#e6e6e6" style="background-image:url('http://www.reedconstructiondata.com/images/specedge/table-of-contents_bg_275.jpg'); background-repeat:no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" style="width:310px;height:275px;" strokecolor="none">
<v:fill type="frame" src="http://www.reedconstructiondata.com/images/specedge/table-of-contents_bg_275.jpg" style="background-color:#e6e6e6;" /></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:310px;height:275px;">
<![endif]-->
<p>This cell does have a background image, but the background color does not show in Outlook 2007 when images are turned off.</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td></tr>
</table>
gennaria, 2 years ago

This technique is great. I'm running into one problem. I have a background image on a TD with this technique. The TD contains a table with the rest of the content. In Outlook 2010 the content is not lining up with the background. The content is about 5px lower and about 15px right of the background. I've validated my code and tried eliminating spaces around the content table. My code is attached. Any insight would be immensely appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Newsletter</title>
    <style>
        .date { font-family: Arial, Helvetica, sans-serif; font-size:14px; color: #ffffff; }
        .dateTD { font-family: Arial, Helvetica, sans-serif; font-size:14px; color: #ffffff; padding-top: 4px; padding-right: 8px; }
        h1 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: bold; line-height: 18px; margin-top: 0; padding: 0; color: #367b7e; margin-bottom: 4px; }
        h2 { font-family:Georgia, "Times New Roman", Times, serif; color: #874d02; font-size: 16px; font-weight: bold; line-height: 22px; margin-top: 0; margin-bottom: 6px;}
        p {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #4c3c27; line-height: 18px; margin-top: 0; margin-bottom: 6px; }
        p.issue {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #367b7e; line-height: 14px; margin-top: 0; margin-bottom: 0; }
        a:link {color: #4c3c27;}
        a:visited {color: #874d02;}
        a:hover {color: #874d02; text-decoration: none;}
        .sidebartitle span {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: normal; font-style: italic; line-height: 14px; margin-top: 0; padding: 0; color: #367b7e; margin-left: 4px; padding-bottom: 4px; }
        .right {margin-left: 8px; margin-bottom: 6px;}
        td.sidebarcontent {border-bottom: 1px solid #aadfec; padding-bottom:6px;}
        .sidebarcontent p { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #4c3c27; line-height: 14px; margin-top: 0; margin-bottom: 2px; margin-left: 10px; }
        .footer p { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #4c3c27; line-height: 13px; margin-top: 0; margin-bottom: 6px;}
        td.featureimage img {border: 2px solid #ffffff;}
        p.readmore { text-align: right; padding: 4px; border-top: 1px solid #4c3c27; border-bottom: 1px solid #4c3c27;}
        p.readmore a:link { color: #4c3c27; text-decoration: none; }
        p.readmore a:visited { color: #4c3c27; text-decoration: none; }
        p.readmore a:hover { color: #4c3c27; text-decoration: underline; }
        p.featuretype {text-transform:uppercase; letter-spacing: 4px; color: #874d02; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; margin: 0;}
        td.featureimage img {border: 2px solid #ffffff;}
        p.housekeeping {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #4c3c27; line-height: 18px; margin-top: 0; margin-bottom: 6px; }
        
    </style>
</head>

<body style="margin: 0; padding: 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#fdf9ed"><tr><td align="center"><table width="780" border="0" cellspacing="0" cellpadding="0"><tr><td background="http://www.juliausher.com/images/email_images/bg2.jpg" width="780" valign="top"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:780px;"><v:fill type="tile" src="http://www.juliausher.com/images/email_images/bg2.jpg" /></v:fill><v:textbox style="mso-fit-shape-to-text:true"><![endif]--><table width="780" border="0" cellspacing="0" cellpadding="0"><tr><td height="164" valign="top"><img src="http://www.juliausher.com/images/email_images/header2.jpg" width="780" height="164" alt="Sugar Buzz Newsletter" /></td></tr>
  <tr>
  <td valign="top"><table width="780" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td width="90"></td><td width="600" align="center" valign="top">
  <table width="576" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td width="230" valign="top">
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td width="230" height="26" valign="bottom" align="left"><p class="issue">Winter 2011-12</p></td>
  </tr>
  <tr>
  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>In this issue...</span></td>
  </tr>
    <tr>
  <td width="230" class="sidebarcontent"><p><strong><em>Feature</em></strong> | <a href="#">Cinnamon Heart Marshmallows</a></p>
<p><strong><em>Favorites</em></strong> | <a href="#">Rubber-Stamping - Cookies!</a></p>
<p><strong><em>Fanfare</em></strong> | <a href="#">News &amp; New Book Teaser</a></p></td>
  </tr>
    <tr>
  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Buy Julia's books...</span></td>
  </tr>
    <tr>
  <td width="230" class="sidebarcontent"><img src="http://www.juliausher.com/images/email_images/cookieswapcover.jpg" width="104" height="116" alt="Book Cover" class="right"/><img src="http://www.juliausher.com/images/email_images/cookieswapcover.jpg" width="104" height="116" alt="Book Cover 2" class="right"/></td>
  </tr>
      <tr>
  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Let's link...</span></td>
  </tr>
    <tr>
  <td width="230" class="sidebarcontent"><a href="http://www.twitter.com"><img src="http://www.juliausher.com/images/email_images/twittericon.gif" border="0" width="24" height="24" alt="Twitter" class="right"/></a><a href="http://www.facebook.com"><img src="http://www.juliausher.com/images/email_images/facebookicon.gif" border="0" width="24" height="24" alt="Facebook" class="right"/></a><a href="http://www.flickr.com"><img src="http://www.juliausher.com/images/email_images/flickricon.gif" border="0" width="24" height="24" alt="Flickr" class="right"/></a><a href="http://www.youtube.com"><img src="http://www.juliausher.com/images/email_images/youtubeicon.gif" border="0" width="24" height="24" alt="YouTube" class="right"/></a><a href="http://www.pinterest.com"><img src="http://www.juliausher.com/images/email_images/pinteresticon.gif" border="0" width="24" height="24" alt="Pinterest" class="right"/></a><a href="http://www.juliausher.com"><img src="http://www.juliausher.com/images/email_images/rssicon.gif" border="0" width="24" height="24" alt="RSS" class="right"/></a></td>
  </tr>
    <tr>
  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Share this newsletter...</span></td>
  </tr>
    <tr>
  <td width="230" class="sidebarcontent"><p>&raquo; <a href="#">Forward to a friend</a></p><p>&raquo; <a href="#">Share on Facebook</a></p><p>&raquo; <a href="#">Share on Twitter</a></p></td>
  </tr>
      <tr>
  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Buzz me...</span></td>
  </tr>
    <tr>
  <td width="230" class="sidebarcontent"><p>I said it in my last newsletter, and I'll say it again: there's nothing more gratifying than meeting my readers when I'm on the road. I sure hope you'll join me at one of my upcoming events!</p></td>
  </tr>
  </table>
  </td>
  <td height="100%" width="8"></td>
  <td height="100%" width="1" bgcolor="#cdc5c5"></td>
  <td height="100%" width="4"></td>
  <td height="100%" width="1" bgcolor="#cdc5c5"></td>
  <td height="100%" width="8"></td>
  <td width="324" valign="top" class="greetings"><h1>Greetings!</h1><img src="http://www.juliausher.com/images/email_images/book.jpg" alt="Book Cover" class="right" width="142" height="194" align="right"/><p>This is that time of year where I exist in Limbo Land. Maybe you're familiar with this part of the world too? It's a place somewhere between last year and not fully into the new one, a place where I'm simultaneously trying to wrap up 2011-loose ends while charting fresh challenges for 2012. What's next? Will I launch an app or an enhanced e-book, or finally pitch networks that TV show I've forever been dreaming to do? Or maybe develop a custom cookie cutter line? But wait! I haven't yet tallied my books sold in November and December, or cleaned up my basement kitchen from the first leg of my tour. And what about all the thank-you notes I owe bookstores and other venues visited in the last few weeks? Yes, you could say I'm more than a bit distracted!</p><p>I share with you that preamble partly to vent :), but mostly to explain what you'll find here: far-flung content that reflects my state of mind! I've got everything from a Christmas retrospective (Holiday in a Hurry) to entertaining and gift ideas for two months from now (Cinnamon Heart Marshmallows and some very cool rubber stamps). </p><p>Hopefully by the time we next talk, I'll be firmly entrenched in 2012. 'Til then, here's to happy meandering!</p><p>Live life sweetly,</p><p><img src="http://www.juliausher.com/images/email_images/juliasignature.gif" width="60" height="18" alt="Julia Signature" /></p></td>
  </tr>
  <tr><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td></tr>
  </table>
  <table width="576" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5f5f9"><tr><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td></tr><tr><td width="14"></td><td class="featureimage" valign="top"><img src="http://www.juliausher.com/images/email_images/featureimage01.jpg" alt="imagename" width="173" height="258" /></td><td width="14"></td><td valign="top"><h2>Holiday in a Hurry:<br />Making Collections Count</h2><p>My husband often questions my habit of collecting throughout the year. In fact, my last antiques mall-find elicited a frown and dismissive, "What is that @#%*$?!!" Granted, I rarely return from my foraging with anything of real monetary value or legitimately deserving "antique" status. More often, my "treasures" are dented, worn, or scratched. And I no doubt confound hubby by shopping for Christmas at seasonally inappropriate times...</p><p class="readmore">&raquo; <a href="#">Read More</a></p><p><i>Photo by Julia M. Usher</i></p></td><td width="14"></td></tr><tr><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td></tr></table>
  <table width="576" border="0" cellspacing="0" cellpadding="0"><tr><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td></tr><tr><td width="14"></td><td valign="top"><p class="featuretype">FEATURE</p><h2>Holiday in a Hurry:<br />Making Collections Count</h2><p>My husband often questions my habit of collecting throughout the year. In fact, my last antiques mall-find elicited a frown and dismissive, "What is that @#%*$?!!" Granted, I rarely return from my foraging with anything of real monetary value or legitimately deserving "antique" status. More often, my "treasures" are dented, worn, or scratched. And I no doubt confound hubby by shopping for Christmas at seasonally inappropriate times...</p><p class="readmore">&raquo; <a href="#">Read More</a></p><p><i>Photo by Julia M. Usher</i></p></td><td width="14"></td><td class="featureimage" valign="top"><img src="http://www.juliausher.com/images/email_images/featureimage01.jpg" alt="imagename" width="173" height="258" /></td><td width="14"></td></tr><tr><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td><td height="14"></td></tr></table>
<table width="600" border="0" cellspacing="0" cellpadding="0" background="http://www.juliausher.com/images/email_images/footer.jpg">
<tr><td width="14"></td><td height="144" valign="bottom" class="footer"><p><strong>Sugar Buzz</strong>, the newsletter of<br /> 
<strong><em>Recipes for A Sweet Life</em></strong></p>
<p>c/o Julia M. Usher 405 Newport Ave, St. Louis, MO 63119</p>
<p>&raquo; <a href="#">Read past Sugar Buzz newsletters</a></p><p>&raquo; <a href="#">Forward to a friend</a></p><p>&raquo; <a href="#">Share on Facebook</a></p><p>&raquo; <a href="#">Share on Twitter</a></p></td></tr>
<tr><td width="14"></td><td height="40" valign="middle" class="footer"><a href="http://www.twitter.com"><img src="http://www.juliausher.com/images/email_images/twittericon.gif" border="0" width="24" height="24" alt="Twitter" class="right"/></a><a href="http://www.facebook.com"><img src="http://www.juliausher.com/images/email_images/facebookicon.gif" border="0" width="24" height="24" alt="Facebook" class="right"/></a><a href="http://www.flickr.com"><img src="http://www.juliausher.com/images/email_images/flickricon.gif" border="0" width="24" height="24" alt="Flickr" class="right"/></a><a href="http://www.youtube.com"><img src="http://www.juliausher.com/images/email_images/youtubeicon.gif" border="0" width="24" height="24" alt="YouTube" class="right"/></a><a href="http://www.pinterest.com"><img src="http://www.juliausher.com/images/email_images/pinteresticon.gif" border="0" width="24" height="24" alt="Pinterest" class="right"/></a><a href="http://www.juliausher.com"><img src="http://www.juliausher.com/images/email_images/rssicon.gif" border="0" width="24" height="24" alt="RSS" class="right"/></a></td></tr>
<tr><td width="14"></td><td height="55" valign="top"></td></tr>
<tr><td width="14"></td><td height="82" valign="top"><p class="housekeeping">Having trouble viewing this email? <a href="#">Try the web version.</a><br />No longer wish to receive this email? <a href="#"><unsubscribe>Unsubscribe</unsubscribe>unsubscribe></a></p></td></tr>
</table>
</td><td width="90" valign="top" align="right"><img src="http://www.juliausher.com/images/email_images/rightside2.jpg" alt="" width="89" height="322"/></td>
  </tr>
</table>
</td>
  </tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
  </tr>
</table>
</td>
  </tr>
</table>
</body>
</html>

Thanks.

roshodgekiss roshodgekiss, 2 years ago

Hi OtherRob, no images will display when images are turned off in the email client, background images or otherwise. The code you have there looks sound, so this is most probably the issue.

Hi gennaria, welcome to the forums. After a little testing, this one admittedly has me stumped. It looks like this background code is adding padding to the sides of images nested in the <!--[if gte mso 9]><v:rect... - as your code is fine, I figure this is a strange quirk with the MSO code.

While I don't yet have a fix, I can suggest adding the background image to the <td> with the body content, instead of the <td> with the header image. This means that this padding issue only affects the image on the right-hand side:

https://img.skitch.com/20120312-fugwjnnqwxny9nyjrn96eucby5.png

To do this, you will need to:

- Re-cut that background image (and potentially work that wonk rightside2.jpg into the background design)
- Use the following code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Newsletter</title>
<style>
.date {
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #ffffff;
}
.dateTD {
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #ffffff;
    padding-top: 4px;
    padding-right: 8px;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    margin-top: 0;
    padding: 0;
    color: #367b7e;
    margin-bottom: 4px;
}
h2 {
    font-family:Georgia, "Times New Roman", Times, serif;
    color: #874d02;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    margin-top: 0;
    margin-bottom: 6px;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #4c3c27;
    line-height: 18px;
    margin-top: 0;
    margin-bottom: 6px;
}
p.issue {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #367b7e;
    line-height: 14px;
    margin-top: 0;
    margin-bottom: 0;
}
a:link {
    color: #4c3c27;
}
a:visited {
    color: #874d02;
}
a:hover {
    color: #874d02;
    text-decoration: none;
}
.sidebartitle span {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    line-height: 14px;
    margin-top: 0;
    padding: 0;
    color: #367b7e;
    margin-left: 4px;
    padding-bottom: 4px;
}
.right {
    margin-left: 8px;
    margin-bottom: 6px;
}
td.sidebarcontent {
    border-bottom: 1px solid #aadfec;
    padding-bottom:6px;
}
.sidebarcontent p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #4c3c27;
    line-height: 14px;
    margin-top: 0;
    margin-bottom: 2px;
    margin-left: 10px;
}
.footer p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #4c3c27;
    line-height: 13px;
    margin-top: 0;
    margin-bottom: 6px;
}
td.featureimage img {
    border: 2px solid #ffffff;
}
p.readmore {
    text-align: right;
    padding: 4px;
    border-top: 1px solid #4c3c27;
    border-bottom: 1px solid #4c3c27;
}
p.readmore a:link {
    color: #4c3c27;
    text-decoration: none;
}
p.readmore a:visited {
    color: #4c3c27;
    text-decoration: none;
}
p.readmore a:hover {
    color: #4c3c27;
    text-decoration: underline;
}
p.featuretype {
    text-transform:uppercase;
    letter-spacing: 4px;
    color: #874d02;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    margin: 0;
}
td.featureimage img {
    border: 2px solid #ffffff;
}
p.housekeeping {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #4c3c27;
    line-height: 18px;
    margin-top: 0;
    margin-bottom: 6px;
}
img {
    display: block;
}
</style>
</head>

<body style="margin: 0; padding: 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#fdf9ed">
  <tr>
    <td><table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td background="http://www.juliausher.com/images/email_images/bg2.jpg" width="780"><table width="780" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="780"><img src="http://www.juliausher.com/images/email_images/header2.jpg" width="780" height="164" alt="Sugar Buzz Newsletter" /></td>
              </tr>
              <tr>
                <td valign="top"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" id="theText" fill="true" stroke="false" style="width:780px;"><v:fill type="tile" src="http://www.juliausher.com/images/email_images/bg2.jpg" /></v:fill><v:textbox style="mso-fit-shape-to-text:true;"><![endif]-->
                  
                  <table width="780" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="90">&nbsp;</td>
                      <td width="600"><table width="576" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="230" valign="top"><table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td width="230" height="26" valign="bottom" align="left"><p class="issue">Winter 2011-12</p></td>
                                </tr>
                                <tr>
                                  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>In this issue...</span></td>
                                </tr>
                                <tr>
                                  <td width="230" class="sidebarcontent"><p><strong><em>Feature</em></strong> | <a href="#">Cinnamon Heart Marshmallows</a></p>
                                    <p><strong><em>Favorites</em></strong> | <a href="#">Rubber-Stamping - Cookies!</a></p>
                                    <p><strong><em>Fanfare</em></strong> | <a href="#">News &amp; New Book Teaser</a></p></td>
                                </tr>
                                <tr>
                                  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Buy Julia's books...</span></td>
                                </tr>
                                <tr>
                                  <td width="230" class="sidebarcontent"><img src="http://www.juliausher.com/images/email_images/cookieswapcover.jpg" width="104" height="116" alt="Book Cover" class="right"/><img src="http://www.juliausher.com/images/email_images/cookieswapcover.jpg" width="104" height="116" alt="Book Cover 2" class="right"/></td>
                                </tr>
                                <tr>
                                  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Let's link...</span></td>
                                </tr>
                                <tr>
                                  <td width="230" class="sidebarcontent"><a href="http://www.twitter.com"><img src="http://www.juliausher.com/images/email_images/twittericon.gif" border="0" width="24" height="24" alt="Twitter" class="right"/></a><a href="http://www.facebook.com"><img src="http://www.juliausher.com/images/email_images/facebookicon.gif" border="0" width="24" height="24" alt="Facebook" class="right"/></a><a href="http://www.flickr.com"><img src="http://www.juliausher.com/images/email_images/flickricon.gif" border="0" width="24" height="24" alt="Flickr" class="right"/></a><a href="http://www.youtube.com"><img src="http://www.juliausher.com/images/email_images/youtubeicon.gif" border="0" width="24" height="24" alt="YouTube" class="right"/></a><a href="http://www.pinterest.com"><img src="http://www.juliausher.com/images/email_images/pinteresticon.gif" border="0" width="24" height="24" alt="Pinterest" class="right"/></a><a href="http://www.juliausher.com"><img src="http://www.juliausher.com/images/email_images/rssicon.gif" border="0" width="24" height="24" alt="RSS" class="right"/></a></td>
                                </tr>
                                <tr>
                                  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Share this newsletter...</span></td>
                                </tr>
                                <tr>
                                  <td width="230" class="sidebarcontent"><p>&raquo; <a href="#">Forward to a friend</a></p>
                                    <p>&raquo; <a href="#">Share on Facebook</a></p>
                                    <p>&raquo; <a href="#">Share on Twitter</a></p></td>
                                </tr>
                                <tr>
                                  <td width="230" height="36" valign="middle" align="left" class="sidebartitle"><img src="http://www.juliausher.com/images/email_images/icingswirl.gif" alt="" width="20" height="20" /><span>Buzz me...</span></td>
                                </tr>
                                <tr>
                                  <td width="230" class="sidebarcontent"><p>I said it in my last newsletter, and I'll say it again: there's nothing more gratifying than meeting my readers when I'm on the road. I sure hope you'll join me at one of my upcoming events!</p></td>
                                </tr>
                              </table></td>
                            <td height="100%" width="8"></td>
                            <td height="100%" width="1" bgcolor="#cdc5c5"></td>
                            <td height="100%" width="4"></td>
                            <td height="100%" width="1" bgcolor="#cdc5c5"></td>
                            <td height="100%" width="8"></td>
                            <td width="324" valign="top" class="greetings"><h1>Greetings!</h1>
                              <img src="http://www.juliausher.com/images/email_images/book.jpg" alt="Book Cover" class="right" width="142" height="194" align="right"/>
                              <p>This is that time of year where I exist in Limbo Land. Maybe you're familiar with this part of the world too? It's a place somewhere between last year and not fully into the new one, a place where I'm simultaneously trying to wrap up 2011-loose ends while charting fresh challenges for 2012. What's next? Will I launch an app or an enhanced e-book, or finally pitch networks that TV show I've forever been dreaming to do? Or maybe develop a custom cookie cutter line? But wait! I haven't yet tallied my books sold in November and December, or cleaned up my basement kitchen from the first leg of my tour. And what about all the thank-you notes I owe bookstores and other venues visited in the last few weeks? Yes, you could say I'm more than a bit distracted!</p>
                              <p>I share with you that preamble partly to vent :), but mostly to explain what you'll find here: far-flung content that reflects my state of mind! I've got everything from a Christmas retrospective (Holiday in a Hurry) to entertaining and gift ideas for two months from now (Cinnamon Heart Marshmallows and some very cool rubber stamps). </p>
                              <p>Hopefully by the time we next talk, I'll be firmly entrenched in 2012. 'Til then, here's to happy meandering!</p>
                              <p>Live life sweetly,</p>
                              <p><img src="http://www.juliausher.com/images/email_images/juliasignature.gif" width="60" height="18" alt="Julia Signature" /></p></td>
                          </tr>
                          <tr>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                          </tr>
                        </table>
                        <table width="576" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5f5f9">
                          <tr>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                          </tr>
                          <tr>
                            <td width="14"></td>
                            <td class="featureimage" valign="top"><img src="http://www.juliausher.com/images/email_images/featureimage01.jpg" alt="imagename" width="173" height="258" /></td>
                            <td width="14"></td>
                            <td valign="top"><h2>Holiday in a Hurry:<br />
                                Making Collections Count</h2>
                              <p>My husband often questions my habit of collecting throughout the year. In fact, my last antiques mall-find elicited a frown and dismissive, "What is that @#%*$?!!" Granted, I rarely return from my foraging with anything of real monetary value or legitimately deserving "antique" status. More often, my "treasures" are dented, worn, or scratched. And I no doubt confound hubby by shopping for Christmas at seasonally inappropriate times...</p>
                              <p class="readmore">&raquo; <a href="#">Read More</a></p>
                              <p><i>Photo by Julia M. Usher</i></p></td>
                            <td width="14"></td>
                          </tr>
                          <tr>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                          </tr>
                        </table>
                        <table width="576" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                          </tr>
                          <tr>
                            <td width="14"></td>
                            <td valign="top"><p class="featuretype">FEATURE</p>
                              <h2>Holiday in a Hurry:<br />
                                Making Collections Count</h2>
                              <p>My husband often questions my habit of collecting throughout the year. In fact, my last antiques mall-find elicited a frown and dismissive, "What is that @#%*$?!!" Granted, I rarely return from my foraging with anything of real monetary value or legitimately deserving "antique" status. More often, my "treasures" are dented, worn, or scratched. And I no doubt confound hubby by shopping for Christmas at seasonally inappropriate times...</p>
                              <p class="readmore">&raquo; <a href="#">Read More</a></p>
                              <p><i>Photo by Julia M. Usher</i></p></td>
                            <td width="14"></td>
                            <td class="featureimage" valign="top"><img src="http://www.juliausher.com/images/email_images/featureimage01.jpg" alt="imagename" width="173" height="258" /></td>
                            <td width="14"></td>
                          </tr>
                          <tr>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                            <td height="14"></td>
                          </tr>
                        </table>
                        <table width="600" border="0" cellspacing="0" cellpadding="0" background="http://www.juliausher.com/images/email_images/footer.jpg">
                          <tr>
                            <td width="14"></td>
                            <td height="144" valign="bottom" class="footer"><p><strong>Sugar Buzz</strong>, the newsletter of<br />
                                <strong><em>Recipes for A Sweet Life</em></strong></p>
                              <p>c/o Julia M. Usher 405 Newport Ave, St. Louis, MO 63119</p>
                              <p>&raquo; <a href="#">Read past Sugar Buzz newsletters</a></p>
                              <p>&raquo; <a href="#">Forward to a friend</a></p>
                              <p>&raquo; <a href="#">Share on Facebook</a></p>
                              <p>&raquo; <a href="#">Share on Twitter</a></p></td>
                          </tr>
                          <tr>
                            <td width="14"></td>
                            <td height="40" valign="middle" class="footer"><a href="http://www.twitter.com"><img src="http://www.juliausher.com/images/email_images/twittericon.gif" border="0" width="24" height="24" alt="Twitter" class="right"/></a><a href="http://www.facebook.com"><img src="http://www.juliausher.com/images/email_images/facebookicon.gif" border="0" width="24" height="24" alt="Facebook" class="right"/></a><a href="http://www.flickr.com"><img src="http://www.juliausher.com/images/email_images/flickricon.gif" border="0" width="24" height="24" alt="Flickr" class="right"/></a><a href="http://www.youtube.com"><img src="http://www.juliausher.com/images/email_images/youtubeicon.gif" border="0" width="24" height="24" alt="YouTube" class="right"/></a><a href="http://www.pinterest.com"><img src="http://www.juliausher.com/images/email_images/pinteresticon.gif" border="0" width="24" height="24" alt="Pinterest" class="right"/></a><a href="http://www.juliausher.com"><img src="http://www.juliausher.com/images/email_images/rssicon.gif" border="0" width="24" height="24" alt="RSS" class="right"/></a></td>
                          </tr>
                          <tr>
                            <td width="14"></td>
                            <td height="55" valign="top"></td>
                          </tr>
                          <tr>
                            <td width="14"></td>
                            <td height="82" valign="top"><p class="housekeeping">Having trouble viewing this email? <a href="#">Try the web version.</a><br />
                                No longer wish to receive this email? <a href="#">
                                <unsubscribe>Unsubscribe</unsubscribe>
                                </a></p></td>
                          </tr>
                        </table></td>
                      <td width="90" valign="top"><table width="90" height="322" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><img src="http://www.juliausher.com/images/email_images/rightside2.jpg" alt="" width="89" height="322"/></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>

Thanks for sending in this curly question - I hope this improves things somewhat!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
  1. 1
  2. 5
  3. 6
  4. 7
  5. 8
  6. 9

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account