Outlook - Extra spacing/padding with background image technique

Hi all,

Long time lurker, first time poster, but I've come to a bit of a dead end figurting this one out, so here goes.

I'm using the following technique to maintain background image compatibility for outlook 07+ (http://www.campaignmonitor.com/blog/pos … tml-email/) which works well for the most part.

However, I"m getting a lot of extra space which is pushing my design out of line in Outlook 2007 and 2010 (and slightly, but not as much in older Outlook's). See screenshot: http://imageshack.us/photo/my-images/44 … mpare.jpg/

http://img443.imageshack.us/img443/4406/mdemailcompare.jpg

Note, the paragraphs under the main heading (which is an image, btw) is pushed out further right than the 25 pixels of space that I've put in. This means that the paragraph copy is pushed too right and is out of line with the heading. The far right (3rd screenshot) is how is should look  (in gmail).

I've removed references to my client but I've also included the code below if anyone would be kind enough to provide me with a pointer of where I'm going wrong. Thank you!

<!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>
    <title>Mother's Day at XXXX XXXX 2012</title>
        <style type="text/css">
            #unsub a, #unsub a:visited { color:#999898; }
        </style>
</head>
    
<body>
    
<table width="100%" height="100%" cellpadding="10" cellspacing="0" border="0" bgcolor="#eeeeee">
    <tr>
        <td align="center">




            <table width="600" height="575" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                                    <td colspan="2" width="600" height="101"> <a border="0" style="border:none;margin:0;padding:0;" title="XXXX - Home page" href="http://example.com/">  <img style="display: block;line-height: 50%;border:none;margin:0;padding:0;" width="600" height="101" src="mothers_top.jpg" alt="XXXX heading" /></a></td>
                </tr>
                <tr>
                                    <td colspan="2" width="600" height="101"> <img style="display: block;line-height: 50%;border:none;margin:0;padding:0;" width="600" height="101" src="mothers_head.jpg" alt="XXXX XXX XXXXX XXXXX" /> </td>
                </tr>
                <tr>
                                    <td align="left" width="380" height="373" bgcolor="#020000" style="background-image: url('mothers_bl.jpg');" background="mothers_bl.jpg" valign="top">
                    <!--[if gte mso 9]>
                                           <v:rect style="width:380px;height:373px;" strokecolor="none">
                                              <v:fill type="tile" src="mothers_bl.jpg" /></v:fill>
                                           </v:rect>
                                           <v:shape id="theText" style="position:absolute;width:380px;height:373px;">
                    <![endif]-->        
                            
                                        <table align="left" valign="top" width="380" height="373" cellpadding="0" cellspacing="0">
                                                <tr>
                                                        <td width="25"><img style="display: block;line-height: 50%;" src="val_px.gif" width="25" height="1" /></td>
                                                        <td valign="top" align="left">

                                                            <p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">We're taking care of Mother&rsquo;s Day this year with our award winning gourmet Indian food.</p>
<p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">And mum never needs to know that you paid just &pound;00.00 per head for our delicious four-course menu.</p>

<p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">Starting with Poppadoms and a pickle tray, followed<br /> by a mixed starter with <span style="color:#999898">Lamb Samosa, Fish Tikka,<br /> Chicken Tikka & Lamb Chops</span>. </p>

<p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">Then select a main course from either <span style="color:#999898">Aloo Channa Balti, Lamb Monty, Chicken Tikka Mackani, Chicken Karahi or Chicken Korma</span>. Served with rice or naan. And of course, desert is included in the price too.</p>



                                                        </td>

                                                </tr>

                                                <tr>
                                                        <td width="25"><img style="display: block;line-height: 50%;" src="val_px.gif" width="25" height="1" /></td>
                                                        <td>
                                                            <table valign="top" cellpadding="0" cellspacing="0" border="0">
                                                                <tr>
                                                                    <td width="173" align="left">
                                                                        <a style="border: none;" href="http://example.com/mothers-day/" title="View the menu"><img src="button_viewmenu.png" style="border:none; display: block;line-height: 50%;" alt="View the menu" width="163" height="29" /></a>
                                                                    </td>
                                                                    <td width="172" align="right">
                                                                        <a style="border: none;" href="http://example.com/mothers-day/" title="View the menu"><img src="button_book.png" style="border:none; display: block;line-height: 50%;" alt="View the menu" width="162" height="29" /></a>
                                                                    </td>
                                                                </tr>
                                                            </table>

                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td width="25"><img style="display: block;line-height: 50%;" src="val_px.gif" width="25" height="1" /></td>
                                                        <td>
                                                                <p style="font-size:11px;font-family:arial,helvetica,sans-serif;color:#fff;">
                                                                        Open 7 days, 11am - midnight, lunch served 11am - 4pm everday
                                                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                                                </p>
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td width="25"><img style="display: block;line-height: 50%;" src="val_px.gif" width="25" height="1" /></td>
                                                        <td>
                                                                <p id="unsub" style="font-size:11px;font-family:arial,helvetica,sans-serif;color:#fff;">
                                                                        <span style="color:#999898"><unsubscribe>Don't want to hear from us? Unsubscribe here.</unsubscribe></span>
                                                                </p>
                                                        </td>

                                                </tr>
                                        </table>
                            
                                            <!--[if gte mso 9]>
                           </v:shape>
                        <![endif]-->
                    </td>
                    <td width="220" height="373" bgcolor="#020000">
                        <img style="display: block;line-height: 50%;" src="mothers_br.jpg" alt="" width="220" height="373" /> 
                    </td>
                </tr>
            </table>
            
    



        </td>
    </tr>
</table>

</body>
</html>
roshodgekiss roshodgekiss, 2 years ago

Hi gvy, welcome to the forums! What's likely the issue is that Outlook 2007 introduces unusual margins and paddings to images in which this background image technique is used. We're still trying to determine under which circumstances this is happening, but chances are your spacer images are being affected.

If your column widths are correct, you shouldn't have to use spacer images. I've removed these, plus the line-height on the images:

<!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>
        <title>Mother's Day at XXXX XXXX 2012</title>
        <style type="text/css">
#unsub a, #unsub a:visited {
    color:#999898;
}
</style>
        </head>

        <body>
        <table width="100%" cellpadding="10" cellspacing="0" border="0" bgcolor="#eeeeee">
          <tr>
            <td align="center"><table width="600" height="575" cellpadding="0" cellspacing="0" border="0">
                <tr>
                <td colspan="2" width="600" height="101"><a border="0" style="border:none;margin:0;padding:0;" title="XXXX - Home page" href="http://example.com/"> <img style="display: block;border:none;margin:0;padding:0;" width="600" height="101" src="mothers_top.jpg" alt="XXXX heading" /></a></td>
              </tr>
                <tr>
                <td colspan="2" width="600" height="101"><img style="display: block;border:none;margin:0;padding:0;" width="600" height="101" src="mothers_head.jpg" alt="XXXX XXX XXXXX XXXXX" /></td>
              </tr>
                <tr>
                <td align="left" width="380" height="373" bgcolor="#020000" style="background-image: url('mothers_bl.jpg');" background="mothers_bl.jpg" valign="top"><!--[if gte mso 9]>
                                           <v:rect style="width:380px;height:373px;" strokecolor="none">
                                              <v:fill type="tile" src="mothers_bl.jpg" /></v:fill>
                                           </v:rect>
                                           <v:shape id="theText" style="position:absolute;width:380px;height:373px;">
                    <![endif]-->
                    
                    <table width="380" height="373" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="25">&nbsp;</td>
                        <td valign="top" align="left"><p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">We're taking care of Mother&rsquo;s Day this year with our award winning gourmet Indian food.</p>
                        <p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">And mum never needs to know that you paid just &pound;00.00 per head for our delicious four-course menu.</p>
                        <p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">Starting with Poppadoms and a pickle tray, followed<br />
                            by a mixed starter with <span style="color:#999898">Lamb Samosa, Fish Tikka,<br />
                          Chicken Tikka &amp; Lamb Chops</span>. </p>
                        <p style="text-align:left;font-size:15px;font-family:arial,helvetica,sans-serif;color:#fff;">Then select a main course from either <span style="color:#999898">Aloo Channa Balti, Lamb Monty, Chicken Tikka Mackani, Chicken Karahi or Chicken Korma</span>. Served with rice or naan. And of course, desert is included in the price too.</p><br /></td>
                      </tr>
                    <tr>
                        <td width="25">&nbsp;</td>
                        <td><table valign="top" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                            <td width="173"><a style="border: none;" href="http://example.com/mothers-day/" title="View the menu"><img src="button_viewmenu.png" style="border:none; display: block;" alt="View the menu" width="163" height="29" /></a></td>
                            <td align="right"><a style="border: none;" href="http://example.com/mothers-day/" title="View the menu"><img src="button_book.png" style="border:none; display: block;" alt="View the menu" width="162" height="29" /></a></td>
                          </tr>
                      </table></td>
                      </tr>
                    <tr>
                        <td width="25">&nbsp;</td>
                        <td><p style="font-size:11px;font-family:arial,helvetica,sans-serif;color:#fff;"> Open 7 days, 11am - midnight, lunch served 11am - 4pm everday
                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p></td>
                      </tr>
                    <tr>
                        <td width="25">&nbsp;</td>
                        <td><p id="unsub" style="font-size:11px;font-family:arial,helvetica,sans-serif;color:#fff;"> <span style="color:#999898">
                          <unsubscribe>Don't want to hear from us? Unsubscribe here.</unsubscribe>
                          </span> </p></td>
                      </tr>
                  </table>
                    
                    <!--[if gte mso 9]>
                           </v:shape>
                        <![endif]--></td>
                <td width="220" height="373" valign="top" bgcolor="#020000"><img style="display: block;" src="mothers_br.jpg" alt="" width="220" height="373" /></td>
              </tr>
              </table></td>
          </tr>
        </table>
</body>
</html>

Thanks, gvy! Let us know how you go :)


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

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

Create an account