Solved

Unwanted extra padding being added to an email in Outlook 2007

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

RoboForm Secure Password Management System

RoboForm Everywhere - Superb Browser Support
Windows / Apple / IOS / Android / Linux / Chrome OS
Use different complex passwords everywhere
Best Secure Password Management by far
Synchronize all of your devices instantly
Safe, Secure & Highly Recommended!

Question has a verified solution.

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

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
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.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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)

732 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