Solved

Unwanted extra padding being added to an email in Outlook 2007

Posted on 2010-11-23
3
1,495 Views
Last Modified: 2012-05-10
Hi,

We have created an email newsletter for one of our customers, which seems to work ok in most popular email clients, however it is adding some extra padding to the bottom of one of the table cells in Outlook 2007 (it may do it in other versions of outlook as well)

If you look at the images below, you will see how it looks in Thunderbird, which is how it should look, and how it is in Outlook 2007, which is incorrect.

We need the space between the image and the edge of the containing box to be 20px, and the bottom of the text in the left hand column to line up with the bottom of the image (so the text is also 20px from the bottom of the containing box)

Hope you can help,
Thanks
Jim

Outlook screen capture:Outlook displays the email like this.Thunderbird screen capture:Thunderbird displays the email like this.Sample code:
<html>
<head>
<title>Test Email</title>
<style type="text/css">
html { padding:0px; margin:0px; }
body {
background-color:#a28769;
font-family:georgia, garamond, serif;
font-size:10px;
line-height:17px;
margin:0px;
padding:0px;
color:#572600;
}
a {
color:#572600;
text-decoration:underline;
}
a:hover {
color:#572600;
text-decoration:none;
}
h3 {
font-size:26px;
line-height:32px;
margin-top:0px;
margin-bottom:15px;
color:#572600;
font-weight:normal;
}
#address a {
color:#572600;
}
#address a:hover {
color:#572600;
text-decoration:underline;
}
table, tr, td { border:0px; }
img { border:none; }
</style>
</head>
<body>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:20px; margin-bottom:20px;">
<tr>
<td valign="top" width="100%" style="background-color:#f9f8f4;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- Start header block -->
<!-- Start header logo -->
<tr>
<td style="text-align:center;" valign="bottom"><table width="696" border="0" cellspacing="0" cellpadding="0" align="center" style="padding:40px 0 32px 0px;"><tr>
<td  width="33%" style="text-align:center;">Email Logo</td>
</tr>
</table></td>
</tr>
<!-- End header logo -->
<!-- Start header splitters and link -->
<tr>
<td><table width="696" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background-color:#786239; width:696px; height:1px;"></td>
</tr>
</table></td>
</tr>
<tr>
<td style="text-align:center; padding:6px 0px; color:#572600; font-size:26px;">Email Title</td>
</tr>
<tr>
<td><table width="696" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background-color:#786239; width:696px; height:1px;"></td>
</tr>
</table></td>
</tr>
<!-- End header splitters and link -->
<!-- End header block -->



<!-- Start content area type 1 -->
<tr>
<td align="center" style="text-align:center;"><table cellspacing="0" cellpadding="0" align="center" style="padding:20px 0 0 0; margin:0 auto; text-align:center;"><tr><td align="center" style="text-align:center;"><table width="696" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#4d2e00; padding:20px; margin:0 auto;">
<tr>
<td style="vertical-align:top; color:#ffffff;" valign="top"><h3 style="color:#ffffff;">LOREM IPSUM<br>DOLOR SIT AMET</h3>
<p style="font-size:13px; line-height:17px; margin-bottom:15px; margin-top:0px;">Consectetur adipiscing elit. Nunc euismod iaculis feugiat. Aliquam convallis erat at nisl feugiat sed vulputate est faucibus.</p>
<p style="font-size:13px; line-height:17px; margin-bottom:15px; margin-top:0px;">Maecenas sollicitudin nisi eget risus adipiscing tincidunt. Etiam orci ipsum, accumsan quis varius ut, elementum et nulla.</p>
</td>
<td align="right" width="388" rowspan="2"><a href="http://www.domain.co.uk/Shop/Details.aspx?Product=Product1" title="Product 1"><img src="http://www.domain.com/images/email/picA.jpg" style="margin:0px; padding:0px;" width="333" height="315" alt="Product 1" align="right" border="0"></a></td>
</tr>
<tr>
<td style="vertical-align:bottom; color:#ffffff; font-style:italic; font-size:13px; line-height:17px;" valign="bottom"><em>Right: <a href="http://www.domain.co.uk/Shop/Details.aspx?Product=Product1" style="color:#ffffff;">The Product 1</a>, <a href="http://www.domain.co.uk/Shop/Details.aspx?Product=Product2" style="color:#ffffff;">The Product 2 with longer title</a></em></td>
</tr>
</table></td></tr></table></td>
</tr>
<!-- End content area type 1 -->



<!-- Start content splitter -->
<tr>
<td><table width="696" align="center" border="0" cellspacing="0" cellpadding="0" style="margin:0px auto;">
<tr><td style="background-color:#f9f8f4; width:696px; height:20px;"></td></tr>
<tr><td style="background-color:#a39278; width:696px; height:2px;"></td></tr>
<tr><td style="background-color:#f9f8f4; width:696px; height:20px;"></td></tr>
</table></td>
</tr>
<!-- End content splitter -->

<!-- Start address -->
<tr>
<td style="padding:0 0 20px 0px; text-align:center; font-size:14px; color:#572600;"><div id="address">Email Footer</div></td>
</tr>
<!-- End address -->

</table></td>
</tr>
</table>
</body>
</html>

Open in new window

0
Comment
Question by:JimMead
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
boraganesh earned 400 total points
ID: 34196282
padding not works in outlook2007..use blank div, td to giv requried spacing....we have also faced the same while sending newsletter..
0
 
LVL 14

Assisted Solution

by:BigBadWolf_000
BigBadWolf_000 earned 100 total points
ID: 34196302
In outlook 2007/2010....Word renders html and has very limited support for CSS, no flash support either.

So in Outlook your html will look the same as the image you posted, however other email clients that use a browser to render will display as you see it in Thunderbird

The way you may be able to resolve is to create the page in just html or for full compatibility with Outlook design it in Word and save as html and it will look the same in outlook...yeah I know it sucks

No idea why the ID10T office development team at MS think this is better!!!!!
0
 
LVL 3

Assisted Solution

by:boraganesh
boraganesh earned 400 total points
ID: 34196314
http://www.campaignmonitor.com/forums/viewtopic.php?id=1570
spacer images, 90% width tables (gulp) or paragraphs should work.
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What does UTC stand for?  “Coordinated Universal Time” – Think of this as the true time on Planet Earth that never changes with the exception of minor leap seconds here and there to account for the changes in the planet's rotation.   What does th…
How to resolve IMCEAEX NDRs in Exchange or Exchange Online related to invalid X500 addresses.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question