Email Templating for Outlook - What are the Tricks on padding/distance?
i hate writing email templates.
with that said, i have a pretty good table'd template created yet Outlook 2007 and Outlook 2010 is creating a lot of spacing between the TR than I notice in other email clients.
OL 2007 (http://screencast.com/t/YJ5LdTkiGR) OL 2010 (http://screencast.com/t/Ob1ii370C)
The code is found below. Any help in getting things to work in Outlook would be greatly appreciated so I can learn and next time not have to bug you :)
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<a href="" title="Join Our Facebook Page"><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0"></a>
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color开发者_运维知识库:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Please try to use below inline style to empty tds avoid more spacing of because empty tds
style="font-size:0%; line-height:1px; mso-line-height-rule:exactly;"
simple and happy coding
The extra space is caused by this empty row:
<tr>
<td> </td>
</tr>
Try replacing that row with:
<tr>
<td height="0" style="padding: 0; margin: 0; height: 0;"></td>
</tr>
Alternatively, sometimes when dealing with Outlook it's easiest to use <br> for spacing.
Here's your full HTML with 2 <br> added at the end of the last paragraph:
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.<br><br>
</td>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<a href="" title="Join Our Facebook Page"><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0" style="display:block"></a>
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论