Solved

Unwanted extra padding being added to an email in Outlook 2007

Posted on 2010-11-23
3
1,488 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
  • 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

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

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

MS Outlook is a world-class email client application that is mainly used for e-communication globally.  In this article, we will discuss the basic idea about MS Outlook, its advanced features, and types of MS Outlook File formats.
Read this checklist to learn more about the 15 things you should never include in an email signature.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 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