Need solution for additional spaces between images

I applied the solution provided to display the background image in Outlook 2007/2010, it works well in OUTLOOK2010/Hotmail/Gmail, it is a fantastic solution indeed!!
The problem now is that I found additional spaces between background images table and its neighbour table. Below is my whole code,
-------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE type="text/css">
 .headerTop { background-color:#ed1c90;text-align:right; }
 .adminText { font-size:10px; color:#ff99cc; line-height:200%; font-family:arial; text-decoration:none; }
 .headerBar { background-color:#FFFFFF; }
 .title { font-size:22px; font-weight:bold; color:#FFF; font-family:arial; line-height:110%; }
 .subTitle { font-size:11px; font-weight:normal; color:#666666; font-style:italic; font-family:arial; }
 td { font-size:12px; color:#000000; line-height:150%; font-family:trebuchet ms; }
 .footerRow { background-color:#ed1c90; }
 .footerText { font-size:10px; color:#333333; line-height:100%; font-family:arial; }
 a { color:#CCC; }
 img {border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
 #Arial {font-family:arial;}
 a:link {color:#3C3C3B;}      
 a:visited {color:#3C3C3B;}  
 a:hover {color:#3C3C3B;}  
 a:active {color:#3C3C3B;} 

}
</STYLE>

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"  bgcolor='#FBFBFB' >


<table width="100%" cellpadding="10" cellspacing="0" bgcolor='#FBFBFB' >

<tr>
  <td width="600" align="center" valign="top">
    
  <table style="background-color:#D6D6D6;" width="600" cellpadding="0" cellspacing="0">
    
    
  <td width="600" bgcolor="#FBFBFB" ><p style="text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B; line-height:45px;"><a href="%%sendfriend_6%%" style="font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;"><forwardtoafriend>Forward to a friend</forwardtoafriend>
</a> | <a href="http://www.example.com.au/" style="font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;">Visit our website</a> | <a href="%%webversion%%" style="font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;"><webversion>Trouble Viewing - View Online</webversion></a></p>
            
        </td>
  
  
  <tr width="100%">
  <td style="background-color:#ed1c90;" width="600"><img src="img/hg_go_header.jpg" width="600" height="230" id="HeaderImage" style="max-width:600px;"/></td>
  </tr>
    
  <tr width="100%">
  <td style="background-color:#ed1c90;" width="600" valign="top"><img src="img/hg_bazaar.jpg" width="600" height="81" alt="Header logos- Totally bazzar home and giving"/></td>
  </tr>
  </table>
    
  <table "style="background-color:#ed1c90;" width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="42" height="394"  valign="top" style="background-color:#ed1c90;"><img src="img/hg_lhs_bg1.jpg" width="42" height="394" alt="background image"></td>
     <td style="background-color:#ed1c90;background-image:url('img/bg2.jpg');" background="img/bg2.jpg" width="330" height="394" valign="top">
     
   <!--[if gte mso 9]>
       <v:rect style="width:330px;height:394px;" strokecolor="none">
          <v:fill type="tile" src="http://www.example.com.au/wp-content/uploads/2011/12/bg2.jpg"/></v:fill>
       </v:rect>
       <v:shape style="position:absolute;width:330px;height:394px;">
       <![endif]-->
    
        <p style="font-size:14px;font-weight:normal;color:#FFF;font-family:arial;line-height:150%">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus ante massa, condimentum at varius quis, laoreet nec nunc.
        Suspendisse facilisis sollicitudin.</p>
        <p style="font-size:14px;font-weight:normal;color:#FFF;font-family:arial;line-height:150%">
        Curabitur pulvinar iaculis est ut sollicitudin. Etiam eget odio id ante rhoncus.
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        At et accusam et justo duo..</p>
        
        
        <!--[if gte mso 9]>
       </v:shape>
    <![endif]-->


    </td> 
      <td width="228" valign="top" style="background-color:#ed1c90;">
     
      
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td valign="top"><img src="img/hg_rhs_date.jpg" alt="25-28 February 2012" width="228" height="86" /></td>
            </tr>
          <tr>
            <td valign="top"><a href="www.example.com.au"><img src="img/hg_rhs_click.jpg" alt="Click here to register" width="228" height="118" /></a></td>
            </tr>
          <tr>
            <td valign="top"><img src="img/hgrhslogos.jpg" alt="Australian gift and homewares association logo" width="228" height="190" /></td>
            </tr>
          </table>
        </td>
      </tr>
  </table>
  <table style="background-color:#ed1c90;" width="600" cellpadding="0" cellspacing="0">
  <tr>
  <td width="42" height="113"  valign="top" style="background-color:#ed1c90;"><img src="img/hg_footer_lhs_bg.jpg" width="42" height="113" alt="background image"></td>
  <td bgcolor="#ed1c90" style="background-image:url('img/hgfooterrhsbg.jpg');" background="img/hgfooterrhsbg.jpg" width="558" height="113" valign="top">
  
  
  <!--[if gte mso 9]>
       <v:rect style="width:558px;height:113px;" strokecolor="none">
          <v:fill type="tile" src="http://www.example.com.au/wp-content/uploads/2011/12/hgfooterrhsbg.jpg"/></v:fill>
       </v:rect>
       <v:shape style="position:absolute;width:558px;height:113px;">
       <![endif]-->

  
    <p style="font-size:20px;color:#FFF;font-family:arial;font-weight:normal;margin:0px;padding:0px;padding-bottom:7px;">TOTALLY <strong>NEW EXHIBITORS</strong>.</p>
    <p style="font-size:20px;color:#FFF;font-family:arial;font-weight:normal;margin:0px;padding:0px;padding-bottom:7px;">TOTALLY <strong>NEW PRODUCTS</strong>.</p>
    <p style="font-size:20px;color:#FFF;font-family:arial;font-weight:normal;margin:0px;padding:0px;padding-bottom:7px;">AND TOTALLY <strong>FREE BUSINESS WORKSHOPS</strong>.</p>
    
    
      <!--[if gte mso 9]>
       </v:shape>
    <![endif]-->
    
    </td>
  </tr>
  </table>
  <table style="background-color:#ed1c90;" width="600" cellpadding="0" cellspacing="0">
  <tr>
  <td valign="top" style="background-color:#ed1c90;"><center><img src="img/hg_footer_imgs.jpg" width="600" height="135" alt="Footer images" /></center></td>
  </tr>
  </table>
  <table style="background-color:##FBFBFB;" width="600" height="30"cellpadding="0" cellspacing="0">
    
  <tr bgcolor="#FBFBFB"><td width="600" height="20" bgcolor="#FCFCFC">
    </td></tr>
    
    
    
  </table>
  <table bgcolor="#FBFBFB" width="600" cellpadding="0" cellspacing="0">
  <tr>
  <td width="25"></td>
    <td width="360" valign="top" style="background:#FBFBFB;"></td>
    <td width="10"></td>
    <td width="29"></td>
    <td width="29"></td> 
    <td width="10"></td>
    <td width="29"></td> 
    <td width="10"></td>
   
    <td width="30"></td>
    
    
    
  </tr>
    
  </table>
 
  <table style="background-color:#FBFBFB;" width="600" cellpadding="0" cellspacing="0">
    
  <tr><td width="240"><a href="http://www.example.com.au/" target="_blank"><img border="0" src="img/exampleassocgrey.png" width="240" height="120" alt=""></a></td>
    <td width="16"><img border="0" src="img/vertbargrey.png" width="16" height="120" alt=""></td>
    <td width="132"><a href="http://www.example.com/" target="_blank"><img border="0" src="img/hgfairgrey.png" width="132" height="120" alt=""></a></td>
    <td width="198"><a href="http://example.com.au/" target="_blank"><img border="0" src="img/vende_logo.png" width="175" height="117" alt=""></a></td></tr>
    
    
    
  </table>
  <table style="background-color:#FBFBFB;" width="600" cellpadding="0" cellspacing="0">
    
  <tr><td width="600">
    <p id="Arial" style="text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;"> This email was sent to you at the following address: [email]<br> <a href="%%unsubscribelink%%" target="_blank" style="text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;"><unsubscribe>Click here</unsubscribe></a> to unsubscribe from our mailing list</p></td></tr>
    
    
    
  </table>
  </td>
</tr>

</table>


</body>
</html>

------------------------------------------
Any response would be highly appreciated, thanks in advance!!

roshodgekiss roshodgekiss, 4 years ago

Hi icbutterfly, I couldn't reproduce this with my test images, so I suspect that the dimensions you set in <v:rect style="width:558px;height:113px;" etc may not be matching the image and cell dimensions. I also found a bit of invalid code, so I cleaned this up for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.headerTop {
    background-color:#ed1c90;
    text-align:right;
}
.adminText {
    font-size:10px;
    color:#ff99cc;
    line-height:200%;
    font-family:arial;
    text-decoration:none;
}
.headerBar {
    background-color:#FFFFFF;
}
.title {
    font-size:22px;
    font-weight:bold;
    color:#FFF;
    font-family:arial;
    line-height:110%;
}
.subTitle {
    font-size:11px;
    font-weight:normal;
    color:#666666;
    font-style:italic;
    font-family:arial;
}
td {
    font-size:12px;
    color:#000000;
    line-height:150%;
    font-family:trebuchet ms;
}
.footerRow {
    background-color:#ed1c90;
}
.footerText {
    font-size:10px;
    color:#333333;
    line-height:100%;
    font-family:arial;
}
a {
    color:#CCC;
}
img {
    display: block;
}
#Arial {
    font-family:arial;
}
a:link {
    color:#3C3C3B;
}
a:visited {
    color:#3C3C3B;
}
a:hover {
    color:#3C3C3B;
}
a:active {
    color:#3C3C3B;
}
</style>
</head>

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"  bgcolor='#FBFBFB' >
<table width="100%" cellpadding="10" cellspacing="0" bgcolor='#FBFBFB' >
  <tr>
    <td width="600" align="center" valign="top"><table style="background-color:#D6D6D6;" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="600" bgcolor="#FBFBFB" ><p style="text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B; line-height:45px;"><a href="%%sendfriend_6%%" style="font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;">
              <forwardtoafriend>Forward to a friend</forwardtoafriend>
              </a> | <a href="http://www.example.com.au/" style="font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;">Visit our website</a> | <a href="%%webversion%%" style="font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;">
              <webversion>Trouble Viewing - View Online</webversion>
              </a></p></td></tr>
        <tr width="100%">
          <td style="background-color:#ed1c90;" width="600"><img src="img/hg_go_header.jpg" width="600" height="230" id="HeaderImage" style="max-width:600px;"/></td>
        </tr>
        <tr width="100%">
          <td style="background-color:#ed1c90;" width="600" valign="top"><img src="img/hg_bazaar.jpg" width="600" height="81" alt="Header logos- Totally bazzar home and giving"/></td>
        </tr>
      </table>
      <table style="background-color:#ed1c90;" width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="42" height="394"  valign="top" style="background-color:#ed1c90;"><img src="img/hg_lhs_bg1.jpg" width="42" height="394" alt="background image" /></td>
          <td style="background-color:#ed1c90;background-image:url('img/bg2.jpg');" background="img/bg2.jpg" width="330" height="394" valign="top"><!--[if gte mso 9]>
       <v:rect style="width:330px;height:394px;" strokecolor="none">
          <v:fill type="tile" src="http://www.example.com.au/wp-content/uploads/2011/12/bg2.jpg"/></v:fill>
       </v:rect>
       <v:shape style="position:absolute;width:330px;height:394px;">
       <![endif]-->
            
            <p style="font-size:14px;font-weight:normal;color:#FFF;font-family:arial;line-height:150%"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Vivamus ante massa, condimentum at varius quis, laoreet nec nunc.
              Suspendisse facilisis sollicitudin.</p>
            <p style="font-size:14px;font-weight:normal;color:#FFF;font-family:arial;line-height:150%"> Curabitur pulvinar iaculis est ut sollicitudin. Etiam eget odio id ante rhoncus.
              Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
              diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              At et accusam et justo duo..</p>
            
            <!--[if gte mso 9]>
       </v:shape>
    <![endif]--></td>
          <td width="228" valign="top" style="background-color:#ed1c90;"><table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td valign="top"><img src="img/hg_rhs_date.jpg" alt="25-28 February 2012" width="228" height="86" /></td>
              </tr>
              <tr>
                <td valign="top"><a href="www.example.com.au"><img src="img/hg_rhs_click.jpg" alt="Click here to register" width="228" height="118" /></a></td>
              </tr>
              <tr>
                <td valign="top"><img src="img/hgrhslogos.jpg" alt="Australian gift and homewares association logo" width="228" height="190" /></td>
              </tr>
            </table></td>
        </tr>
      </table>
      <table style="background-color:#ed1c90;" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="42" height="113"  valign="top" style="background-color:#ed1c90;"><img src="img/hg_footer_lhs_bg.jpg" width="42" height="113" alt="background image" /></td>
          <td bgcolor="#ed1c90" style="background-image:url('img/hgfooterrhsbg.jpg');" background="img/hgfooterrhsbg.jpg" width="558" height="113" valign="top"><!--[if gte mso 9]>
       <v:rect style="width:558px;height:113px;" strokecolor="none">
          <v:fill type="tile" src="http://www.example.com.au/wp-content/uploads/2011/12/hgfooterrhsbg.jpg"/></v:fill>
       </v:rect>
       <v:shape style="position:absolute;width:558px;height:113px;">
       <![endif]-->
            <p style="font-size:20px;color:#FFF;font-family:arial;font-weight:normal;margin:0px;padding:0px;padding-bottom:7px;">TOTALLY <strong>NEW EXHIBITORS</strong>.</p>
            <p style="font-size:20px;color:#FFF;font-family:arial;font-weight:normal;margin:0px;padding:0px;padding-bottom:7px;">TOTALLY <strong>NEW PRODUCTS</strong>.</p>
            <p style="font-size:20px;color:#FFF;font-family:arial;font-weight:normal;margin:0px;padding:0px;padding-bottom:7px;">AND TOTALLY <strong>FREE BUSINESS WORKSHOPS</strong>.</p>
            <!--[if gte mso 9]>
       </v:shape>
    <![endif]--></td>
        </tr>
      </table>
      <table style="background-color:#ed1c90;" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" style="background-color:#ed1c90;"><center>
              <img src="img/hg_footer_imgs.jpg" width="600" height="135" alt="Footer images" />
            </center></td>
        </tr>
      </table>
      <table style="background-color:##FBFBFB;" width="600" height="30"cellpadding="0" cellspacing="0">
        <tr bgcolor="#FBFBFB">
          <td width="600" height="20" bgcolor="#FCFCFC"></td>
        </tr>
      </table>
      <table bgcolor="#FBFBFB" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="25"></td>
          <td width="360" valign="top" style="background:#FBFBFB;"></td>
          <td width="10"></td>
          <td width="29"></td>
          <td width="29"></td>
          <td width="10"></td>
          <td width="29"></td>
          <td width="10"></td>
          <td width="30"></td>
        </tr>
      </table>
      <table style="background-color:#FBFBFB;" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="240"><a href="http://www.example.com.au/" target="_blank"><img border="0" src="img/exampleassocgrey.png" width="240" height="120" alt="" /></a></td>
          <td width="16"><img border="0" src="img/vertbargrey.png" width="16" height="120" alt="" /></td>
          <td width="132"><a href="http://www.example.com/" target="_blank"><img border="0" src="img/hgfairgrey.png" width="132" height="120" alt="" /></a></td>
          <td width="198"><a href="http://example.com.au/" target="_blank"><img border="0" src="img/vende_logo.png" width="175" height="117" alt="" /></a></td>
        </tr>
      </table>
      <table style="background-color:#FBFBFB;" width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td width="600"><p id="Arial" style="text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;"> This email was sent to you at the following address: [email]<br />
              <a href="%%unsubscribelink%%" target="_blank" style="text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px; color:#3C3C3B;">
              <unsubscribe>Click here</unsubscribe>
              </a> to unsubscribe from our mailing list</p></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

If you still see these gaps, kindly email support [at] campaignmonitor with the images you're using in the campaign - I'll take a look and see what can be done :)


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

Hi roshodgekiss, thanks, your reply is always timely, i have emailed support the code as well as image, please have a look if you could, thanks.

roshodgekiss roshodgekiss, 4 years ago

No problem, as per my email, I'll take a look later today. Thank you! :D


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

Thanks Ros, your code does work!! My problem is that i have line-height set to 150%... Remove it, then all good!!

roshodgekiss roshodgekiss, 4 years ago

Hah, thanks for posting a follow-up here and glad the code is working now - that one had me stumped for a little while :D Have a great weekend ahead!


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

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098