Bizarre Outlook td/img spacing

Hi Guys,

I've been all over this forum trying to find a solution to a little issue I'm having with nested tables in outlook 2007.
Obviously it displays great in all clients/browsers except in Outlook 2007 there seems to be some width added somewhere which has me completely stumped.

Essentially it's kicking out by 1px to the left and 2px to the right in a kind of weird cascade.

The basic code is as follows (excuse the placeholder images, but this displays the same pproblem in outlook 2007)

<!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">
<html>
<head>
    <style type="text/css">
    IMG {display:block;}
    table td {border-collapse:collapse;}
    </style>
</head>
<body cellpadding="0" cellspacing="0">
<!-- CONTAINER TABLE -->
<table width="100%" height="100%" bgcolor="#330099" cellpadding="0" cellspacing="0" border="1"><tr valign="top">
<td width="550" align="center">
<!-- MAIN EMAIL CONTENT - ALWAYS 550px WIDE -->
    
<table cellpadding="0" cellspacing="0" border="0" width="550" style="margin:auto;">
    <tr>
        <td width="550">
        <a href=""><img alt="" title="" src="http://www.orangecountymuaythai.com/mma-images/spacer.jpg" border="0" height="100px" width="550px" /></a></td>
    </tr>
    <tr>
        <td width="550">
        <img alt="" src="http://lib.store.yahoo.net/lib/mustangtuning/mishimoto-radiator-install-04.gif" width="550px" height="190px" />
        </td>
    </tr>
    <tr>
        <td width="550" style="background:#ffffff;color:#5b0415;font-family:verdana;font-size:12px;text-align:left;padding:10px 0px 10px 0px;">
        <div style="width:530px;background:#ff11aa;margin:auto;">
                <span style="font-size:10px;font-weight:normal;text-transform:uppercase;text-decoration:none;"><em>
                    Thursday 4th February 2010</em></span><br />
                <span style="font-size:20px;font-weight:normal;"><em>Headline</em></span><br /><br />
                Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                Lots of text in here Lots of text in here Lots of text in here <br /><br />Lots of text in here Lots of text in here 
                Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
            </div>
        </td>
    </tr>
    <tr>
        <td width="550">
            <table border="0" cellpadding="0" cellspacing="0" width="550">
                <tr>
                    <td width="275">
                    <a href="" title=""><img alt="" title="" src="http://www.survival.ie/03%20Spacer.jpg" border="0" height="60px" width="275px" /></a>
                    </td>
                    <td width="275">
                    <a href="" title=""><img alt="" title="" src="http://www.tachibanaschool.com/images/redspacer.gif" border="0" height="60px" width="275px" /></a>
                    </td>
                </tr>
                <tr>
                    <td width="275">
                    <a href="" title=""><img alt="" title="" src="http://www.tachibanaschool.com/images/redspacer.gif" border="0" height="60px" width="275px" /></a>
                    </td>
                    <td width="275">
                    <a href="" title=""><img alt="" title="" src="http://www.survival.ie/03%20Spacer.jpg" border="0" height="60px" width="275px" /></a>
                    </td>
                </tr>
                <tr>
                    <td width="275">
                    <a href="" title=""><img alt="" title="" src="http://www.survival.ie/03%20Spacer.jpg" border="0" height="60px" width="275px" /></a>
                    </td>
                    <td width="275">
                    <a href="" title=""><img alt="" title="" src="http://www.tachibanaschool.com/images/redspacer.gif" border="0" height="60px" width="275px" /></a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr valign="top">
        <td>
            <img alt="" title="" src="http://www.simontheduck.com/footer.jpg" height="31" width="550px" /><br />
        </td>
    </tr>
    <tr>
        <td width="550" style="text-align:center;padding:10px 0px 20px 0px;color:white;font-size:11px;font-family:verdana;">
                    Are there things you&#x27;d like to see in our Newsletters?
        </td>
    </tr>
    <tr>
        <td width="550" style="text-align:center;padding:0px 0px 20px 0px;color:white;font-size:11px;font-family:verdana;">
        Some other T&C text
        </td>
    </tr>
</table>
<!-- END CONTAINER TABLE -->
</td>
</tr>
</table>
</body>    
</html>

Any help would be greatly appreciated..

Mathew Mathew, 6 years ago

One thing I would change is remove the "px" from your image parameters - it should be

<img alt="" src="http://lib.store.yahoo.net/lib/mustangtuning/mishimoto-radiator-install-04.gif" width="550" height="190" />

without the px after the numbers. It could be throwing out Outlooks rendering (as many, many things do!)


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

Hi Mathew,

thanks very much for such a quick response - sadly it hasn't made the difference I was hoping and I still get the same alignment errors.

It  seems that it's something to do with tds that only have image content.

Really confusing.

fyredefyre fyredefyre, 6 years ago

Wow, very pretty colours saysomestuff :)

I'd also ensure you add border="0" to your images just in case these become links and throw out your design.

If your email is still giving you grief take the padding out of your nested table and create cells for columns and set them to be 10px wide each as Outlook 2007 can be a bit funny with padding at the best of times.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
BThies BThies, 6 years ago

on it.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

• Avoid using padding (not fully compatible).
• Use <div>'s to create vertical spacing and cells and/or nested tables for horizontal spacing.
• As noted above, don't use px when specifying images.
• Define styles within <div>'s or <span>'s for font properties.
• Align the text using the <div> (align="center"  or  align="right"  etc.)
• margin:auto is not fully supported
• The initial TD of the 100% width table should not have any width set to it.  Any borders should be defined in TD's.

See revised code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img {
    display:block;
}
table td {
    border-collapse:collapse;
}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" style="margin-left:0px; margin-top:0px; padding-left:0px; padding-top:0px;">
<!-- CONTAINER TABLE -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="border:1px solid #999999;" align="center" bgcolor="#330099"><!-- MAIN EMAIL CONTENT - ALWAYS 550px WIDE -->
      <table cellpadding="0" cellspacing="0" border="0" width="550">
        <tr>
          <td width="550"><a href="#"><img alt="" title="" src="http://www.orangecountymuaythai.com/mma-images/spacer.jpg" border="0" height="100" width="550" /></a></td>
        </tr>
        <tr>
          <td width="550"><img alt="" src="http://lib.store.yahoo.net/lib/mustangtuning/mishimoto-radiator-install-04.gif" width="550" height="190" /></td>
        </tr>
        <tr>
          <td width="550" bgcolor="#FFFFFF"><div style="font-size:10px;">&nbsp;</div>
            <table width="550" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="10">&nbsp;</td>
                <td width="530" bgcolor="#ff11aa"><div align="left" style="font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#5b0415;"><em>THURSDAY 4TH FEBRUARY 2010</em></div>
                  <div align="left" style="font-size:18px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#5b0415;"><em>Headline</em></div>
                  <div style="font-size:12px;">&nbsp;</div>
                  <div align="left" style="font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#5b0415;">Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                    Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                    Lots of text in here Lots of text in here Lots of text in here <br />
                    <br />
                    Lots of text in here Lots of text in here 
                    Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                    Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here 
                    Lots of text in here Lots of text in here Lots of text in here Lots of text in here Lots of text in here</div></td>
                <td width="10">&nbsp;</td>
              </tr>
            </table>
            <div style="font-size:10px;">&nbsp;</div></td>
        </tr>
        <tr>
          <td width="550"><table border="0" cellpadding="0" cellspacing="0" width="550">
              <tr>
                <td width="275"><a href="#" title=""><img alt="" title="" src="http://www.survival.ie/03%20Spacer.jpg" border="0" height="60" width="275" /></a></td>
                <td width="275"><a href="#" title=""><img alt="" title="" src="http://www.tachibanaschool.com/images/redspacer.gif" border="0" height="60" width="275" /></a></td>
              </tr>
              <tr>
                <td width="275"><a href="#" title=""><img alt="" title="" src="http://www.tachibanaschool.com/images/redspacer.gif" border="0" height="60" width="275" /></a></td>
                <td width="275"><a href="#" title=""><img alt="" title="" src="http://www.survival.ie/03%20Spacer.jpg" border="0" height="60" width="275" /></a></td>
              </tr>
              <tr>
                <td width="275"><a href="#" title=""><img alt="" title="" src="http://www.survival.ie/03%20Spacer.jpg" border="0" height="60" width="275" /></a> </td>
                <td width="275"><a href="#" title=""><img alt="" title="" src="http://www.tachibanaschool.com/images/redspacer.gif" border="0" height="60" width="275" /></a></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="550"><img alt="" title="" src="http://www.simontheduck.com/footer.jpg" height="31" width="550" /></td>
        </tr>
        <tr>
          <td width="550"><div style="font-size:18px;">&nbsp;</div>
            <div align="center" style="font-size:11px; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif;">Are there things you'd like to see in our Newsletters?</div>
            <div style="font-size:18px;">&nbsp;</div></td>
        </tr>
        <tr>
          <td width="550"><div align="center" style="font-size:11px; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif;">Some other T&amp;C text</div>
            <div style="font-size:18px;">&nbsp;</div></td>
        </tr>
      </table>
      <!-- END CONTAINER TABLE -->
    </td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
saysomestuff, 6 years ago

Wow, thanks for the replies and Brian you are a legend.

Seems to be displaying alot better, I'm still not sure if it's 100% right though as I've only had a chance to open it in word 2007 today as I'm away from my testing rig.

Would anyone be able to do a super quick outlook 2k7 test?

Many thanks in advance

BThies BThies, 6 years ago

Yep, tested in outlook 2007 and many others before posting.  You're good to go.


Brian Thies
Professional Email Developer
Thies Publishing
ronjacobson, 6 years ago

That's awesome.... I think it will be good to define the styles... and stuff like that..
^_^ well, you know better!


Our housekeepers
candidates are personally interviewed in our office and have checkable references.
mryanSanky, 6 years ago

hey, i too have been having a strange issue occur only in Outlook 07.

the internal box that is aligned right is pushed left by 1px ONLY in OL 07.

any help would be greatly appreciated.

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>SI - Presidents Day Thu Feb 11 10:09:46 EST 2010</title>
</head>
<body>

<table cellspacing="0" cellpadding="0" border="0" align="center" width="600">
    <tr>
        <td>
            <img src="http://testing.sankyspace.com/matt/si/images/smithsonian_01.jpg" width="185" height="45" alt="Smithsonian" style="display:block;border:none;" border="0"/>
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://testing.sankyspace.com/matt/si/images/honoring-heroes.jpg" width="600" height="146" alt="Honoring Heroes" style="display:block;border:none;" border="0"/>
        </td>
    </tr>
    <tr>
        <td>
            <table cellspacing="0" cellpadding="0" border="0" align="center">
                <tr>
                    <td width="20"></td>
                    <td>
                        <!-- box -->

                        <table cellspacing="0" cellpadding="0" border="0" align="right">
                            <tr>
                                <td width="10"></td>
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_08.jpg" width="212" height="221" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_09.jpg" width="27" height="221" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="10"></td>                                
                                <td width="212" style="background:#183391;">
                                    <table cellspacing="0" cellpadding="0" border="0" align="center">
                                        <tr>
                                            <td width="5"></td>
                                            <td height="5"></td>
                                            <td width="5"></td>
                                        </tr>
                                        <tr>
                                            <td width="5"></td>
                                            <td align="center">
                                                <span style="font:12px arial;color:#ffffff;font-style:italic;">
                                                    Curabitur varius sapien id neque varius suscipit. Vivamus at augue arcu. Curabitur blandit quam nisl pulvinar. 
                                                </span>
                                            </td>
                                            <td width="5"></td>                                            
                                        </tr>
                                        <tr>
                                            <td width="5"></td>
                                            <td height="5"></td>
                                            <td width="5"></td>
                                        </tr>                                        
                                    </table>
                                </td>
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_12.jpg" width="27" height="44" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="10"></td>                                
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_14.jpg" width="212" height="18" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_15.jpg" width="27" height="18" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="10"></td>                                
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_17.jpg" width="212" height="31" alt="Donate Now" style="display:block;border:none;" border="0"/>
                                </td>
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_18.jpg" width="27" height="31" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="10"></td>                                
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_20.jpg" width="212" height="7" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                                <td>
                                    <img src="http://testing.sankyspace.com/matt/si/images/box/bb_21.jpg" width="27" height="7" alt="" style="display:block;border:none;" border="0"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="10" height="10"></td>
                                <td width="212"></td>
                                <td width="27"></td>
                            </tr>                
                        </table>

                        <span style="font:12px arial;color:#37699c;">
                            <br />
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus vel mi laoreet tempor id a arcu. Mauris vel risus vel risus eleifend adipiscing. Cras venenatis egestas turpis, sed suscipit nibh scelerisque quis. Pellentesque adipiscing diam mattis quam ullamcorper ut adipiscing eros sodales. Quisque sollicitudin lacus pharetra velit facilisis et imperdiet mi auctor. Nullam vitae massa eros. 
                            <br /><br />
                            Pellentesque auctor nisl eu turpis lobortis aliquet. Nunc rhoncus lobortis hendrerit. Proin a varius ante. Nullam sagittis velit eu dolor tempus a mollis leo hendrerit.
                            <br /><br />
                            Curabitur auctor, felis sed mollis laoreet, neque felis semper nisi, in ultrices risus enim dapibus orci. Morbi id velit non diam condimentum sodales. Sed porta aliquet diam, eget convallis sapien lacinia at.
                            <br /><br />
                            In volutpat dictum suscipit. Nullam posuere orci a risus ultrices tempor. Nam sed diam vitae dolor suscipit eleifend. Ut et magna velit. Phasellus euismod ultricies lacinia. Aenean laoreet sem id magna tempus pretium. Nunc auctor turpis non magna tempus nec pharetra.
                            <br /><br />
                            Nella mi dolor,
                            <br /><br />
                            Nascetur Eleifend Lacus
                            <br /><br />
                            P.S. (Quisque accumsan, nunc quis faucibus blandit, orci nisi sodales enim, non aliquam dui massa nec purus.)                
                        </span>
                    </td>
                </tr>
                <tr>
                    <td width="20" height="80"></td>
                    <td height="80">
                        <img src="http://testing.sankyspace.com/matt/si/images/donate-now_42.jpg" width="175" height="33" alt="Donate Now" style="border:none;" border="0"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td height="20"></td>
    </tr>
    <tr>
        <td style="background:#183391;">
            <table cellspacing="0" cellpadding="0" border="0" align="center">
                <tr>
                    <td width="10"></td>
                    <td height="15"></td>
                    <td width="10"></td>                    
                </tr>
                <tr>
                    <td width="10"></td>
                    <td align="center">
                        <span style="font:12px arial;color:#ffffff;">
                            <strong>Smithsonian Institution</strong>  |  1000 Jefferson Dr SW, 4th Floor, Washington DC 20560                    
                        </span>
                    </td>
                    <td width="10"></td>                    
                </tr>
                <tr>
                    <td></td>
                    <td height="4"></td>
                    <td></td>
                </tr>
                <tr>
                    <td width="10"></td>
                    <td align="center">
                        <span style="font:12px arial;color:#ffffff;">                        
                            Privacy Policy  |  Contact Us  |  &copy; 2010 Smithsonian Institution
                        </span>
                    </td>
                    <td width="10"></td>
                </tr>
                <tr>
                    <td width="10"></td>
                    <td height="15"></td>
                    <td width="10"></td>                    
                </tr>                
            </table>
        </td>
    </tr>
</table>
</body>
</html>
BThies BThies, 6 years ago

@mryanSanky

Use this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SI - Presidents Day Thu Feb 11 10:09:46 EST 2010</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="600">
  <tr>
    <td width="600" align="left"><img src="http://testing.sankyspace.com/matt/si/images/smithsonian_01.jpg" width="185" height="45" alt="Smithsonian" style="display:block" border="0" /> <img src="http://testing.sankyspace.com/matt/si/images/honoring-heroes.jpg" width="600" height="146" alt="Honoring Heroes" style="display:block;" border="0" /> </td>
  </tr>
  <tr>
    <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="20">&nbsp;</td>
          <td width="331" valign="top"><div align="left" style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#37699c;"> <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus vel mi laoreet tempor id a arcu. Mauris vel risus vel risus eleifend adipiscing. Cras venenatis egestas turpis, sed suscipit nibh scelerisque quis. Pellentesque adipiscing diam mattis quam ullamcorper ut adipiscing eros sodales. Quisque sollicitudin lacus pharetra velit facilisis et imperdiet mi auctor. Nullam vitae massa eros. <br />
              <br />
              Pellentesque auctor nisl eu turpis lobortis aliquet. Nunc rhoncus lobortis hendrerit. Proin a varius ante. Nullam sagittis velit eu dolor tempus a mollis leo hendrerit. <br />
              <br />
              Curabitur auctor, felis sed mollis laoreet, neque felis semper nisi, in ultrices risus enim dapibus orci. Morbi id velit non diam condimentum sodales. Sed porta aliquet diam, eget convallis sapien lacinia at. <br />
              <br />
              In volutpat dictum suscipit. Nullam posuere orci a risus ultrices tempor. Nam sed diam vitae dolor suscipit eleifend. Ut et magna velit. Phasellus euismod ultricies lacinia. Aenean laoreet sem id magna tempus pretium. Nunc auctor turpis non magna tempus nec pharetra. <br />
              <br />
              Nella mi dolor, <br />
              <br />
              Nascetur Eleifend Lacus <br />
              <br />
            </div></td>
          <td width="10">&nbsp;</td>
          <td width="212" valign="top"><table width="212" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td bgcolor="#193392"><img src="http://testing.sankyspace.com/matt/si/images/box/bb_08.jpg" width="212" height="221" alt="" style="display:block;" border="0"/> </td>
              </tr>
            </table>
            <table width="212" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="5" bgcolor="#193392"><div style="font-size:4px; color:#193392">.</div></td>
                <td width="202" bgcolor="#193392"><div align="center" style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#ffffff;"> <i>Curabitur varius sapien id neque varius suscipit. Vivamus at augue arcu. Curabitur blandit quam nisl pulvinar.</i> </div></td>
                <td width="5" bgcolor="#193392"><div style="font-size:4px; color:#193392">.</div></td>
              </tr>
            </table>
            <table width="212" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td bgcolor="#193392"><img src="http://testing.sankyspace.com/matt/si/images/box/bb_14.jpg" width="212" height="18" alt="" style="display:block;border:none;" border="0"/> <img src="http://testing.sankyspace.com/matt/si/images/box/bb_17.jpg" width="212" height="31" alt="Donate Now" style="display:block;border:none;" border="0"/> <img src="http://testing.sankyspace.com/matt/si/images/box/bb_20.jpg" width="212" height="7" alt="" style="display:block;border:none;" border="0"/> </td>
              </tr>
            </table></td>
          <td width="27">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="20">&nbsp;</td>
          <td width="580"><div align="left" style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#37699c;">P.S. (Quisque accumsan, nunc quis faucibus blandit, orci nisi sodales enim, non aliquam dui massa nec purus.)</div>
            <div style="font-size:18px;">&nbsp;</div>
            <img src="http://testing.sankyspace.com/matt/si/images/donate-now_42.jpg" width="175" height="33" alt="Donate Now" style="display:block;" border="0"/>
            <div style="font-size:18px;">&nbsp;</div>
            <div style="font-size:18px;">&nbsp;</div></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="600" bgcolor="#193392"><div style="font-size:12px;">&nbsp;</div>
      <div align="center" style="font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;"><strong>Smithsonian Institution</strong> |  1000 Jefferson Dr SW, 4th Floor, Washington DC 20560</div>
      <div style="font-size:4px;">&nbsp;</div>
      <div align="center" style="font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;">Privacy Policy  |  Contact Us  |  &copy; 2010 Smithsonian Institution</div>
      <div style="font-size:12px;">&nbsp;</div></td>
  </tr>
</table>
</body>
</html>

• Height is not fully supported, instead use <DIV>'s to recreate vertical spacing
• Short-hand font is not fully supported
• Text wraps around tables don't always display correctly in all e-mail clients
• Spacer images are not necessary
• Always always always define the width of every TD.  Don't leave some e-mail clients guessing, as they'll usually guess wrong.


Brian Thies
Professional Email Developer
Thies Publishing
mryanSanky, 6 years ago

thanks brian,

i guess the best way to get a text wrap is just to break it up.

much appreciated!

mryanSanky, 6 years ago

problem is that removes the whole modular nature of the template.

something the a developer would rather do himself and not the client.

BThies BThies, 6 years ago

If I understand correctly, you wanted to provide your client the option of removing the right section?


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

Here's an example of using that template and providing the client the option of removing the right column and having the left column "stretch" the full width once the right column is removed.

You'll notice the left column is set to 100% width while the right column is wrapped in a repeater to allow easy removal.

** Just add description,image,title tags and an unsubscribe link **

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SI - Presidents Day Thu Feb 11 10:09:46 EST 2010</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="600">
  <tr>
    <td width="600" align="left"><img src="http://testing.sankyspace.com/matt/si/images/smithsonian_01.jpg" width="185" height="45" alt="Smithsonian" style="display:block" border="0" /> <img src="http://testing.sankyspace.com/matt/si/images/honoring-heroes.jpg" width="600" height="146" alt="Honoring Heroes" style="display:block;" border="0" /> </td>
  </tr>
  <tr>
    <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="20">&nbsp;</td>
          <td width="553"><table width="553" cellpadding="0" cellspacing="0" border="0">
              <tr>
              <td width="100%" valign="top"><div align="left" style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#37699c;"> <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus vel mi laoreet tempor id a arcu. Mauris vel risus vel risus eleifend adipiscing. Cras venenatis egestas turpis, sed suscipit nibh scelerisque quis. Pellentesque adipiscing diam mattis quam ullamcorper ut adipiscing eros sodales. Quisque sollicitudin lacus pharetra velit facilisis et imperdiet mi auctor. Nullam vitae massa eros. <br />
              <br />
              Pellentesque auctor nisl eu turpis lobortis aliquet. Nunc rhoncus lobortis hendrerit. Proin a varius ante. Nullam sagittis velit eu dolor tempus a mollis leo hendrerit. <br />
              <br />
              Curabitur auctor, felis sed mollis laoreet, neque felis semper nisi, in ultrices risus enim dapibus orci. Morbi id velit non diam condimentum sodales. Sed porta aliquet diam, eget convallis sapien lacinia at. <br />
              <br />
              In volutpat dictum suscipit. Nullam posuere orci a risus ultrices tempor. Nam sed diam vitae dolor suscipit eleifend. Ut et magna velit. Phasellus euismod ultricies lacinia. Aenean laoreet sem id magna tempus pretium. Nunc auctor turpis non magna tempus nec pharetra. <br />
              <br />
              Nella mi dolor, <br />
              <br />
              Nascetur Eleifend Lacus <br />
              <br />
            </div></td>
              <repeater><!-- Begin Flex Right Column -->
              <td width="222" valign="top"><table width="222" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td width="10" bgcolor="#ffffff;">&nbsp;</td>
                    <td bgcolor="#193392" width="212"><img src="http://testing.sankyspace.com/matt/si/images/box/bb_08.jpg" width="212" height="221" alt="" style="display:block;" border="0"/> </td>
                  </tr>
                </table>
              <table width="222" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="10" bgcolor="#ffffff;">&nbsp;</td>
                <td width="5" bgcolor="#193392"><div style="font-size:4px; color:#193392">.</div></td>
                <td width="202" bgcolor="#193392"><div align="center" style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#ffffff;"><i>Curabitur varius sapien id neque varius suscipit. Vivamus at augue arcu. Curabitur blandit quam nisl pulvinar.</i> </div></td>
                <td width="5" bgcolor="#193392"><div style="font-size:4px; color:#193392">.</div></td>
              </tr>
              </table>
              <table width="222" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="10" bgcolor="#ffffff;">&nbsp;</td>
                <td bgcolor="#193392" width="212"><img src="http://testing.sankyspace.com/matt/si/images/box/bb_14.jpg" width="212" height="18" alt="" style="display:block;border:none;" border="0"/> <img src="http://testing.sankyspace.com/matt/si/images/box/bb_17.jpg" width="212" height="31" alt="Donate Now" style="display:block;border:none;" border="0"/> <img src="http://testing.sankyspace.com/matt/si/images/box/bb_20.jpg" width="212" height="7" alt="" style="display:block;border:none;" border="0"/> </td>
              </tr>
              </table></td>
              </repeater><!-- End Flex Right Column -->
            </tr>
          </table></td>
          <td width="27">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="20">&nbsp;</td>
          <td width="580"><div align="left" style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#37699c;">P.S. (Quisque accumsan, nunc quis faucibus blandit, orci nisi sodales enim, non aliquam dui massa nec purus.)</div>
            <div style="font-size:18px;">&nbsp;</div>
            <img src="http://testing.sankyspace.com/matt/si/images/donate-now_42.jpg" width="175" height="33" alt="Donate Now" style="display:block;" border="0"/>
            <div style="font-size:18px;">&nbsp;</div>
            <div style="font-size:18px;">&nbsp;</div></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="600" bgcolor="#193392"><div style="font-size:12px;">&nbsp;</div>
      <div align="center" style="font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;"><strong>Smithsonian Institution</strong> |  1000 Jefferson Dr SW, 4th Floor, Washington DC 20560</div>
      <div style="font-size:4px;">&nbsp;</div>
      <div align="center" style="font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;">Privacy Policy  |  Contact Us  |  &copy; 2010 Smithsonian Institution</div>
      <div style="font-size:12px;">&nbsp;</div></td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing

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