Solved

Unwanted extra padding being added to an email in Outlook 2007

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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

Suggested Solutions

In this step by step procedure, you will come to know the details of creating an Outlook meeting in 2007, 2010, 2013 & 2016.
When you have clients or friends from around the world, it becomes a challenge to arrange a meeting or effectively manage your time. This is where Outlook's capability to show 2 time zones in one calendar comes in handy.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

831 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