?
Solved

Unwanted extra padding being added to an email in Outlook 2007

Posted on 2010-11-23
3
Medium Priority
?
1,506 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 1600 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 400 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 1600 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

How to resolve IMCEAEX NDRs in Exchange or Exchange Online related to invalid X500 addresses.
This article describes how to import Lotus Notes Contacts into Outlook 2016, 2013, 2010 and 2007 etc. with a few manual steps. You can easily export and migrate Lotus Notes contacts into Microsoft Outlook without having to use any third party tools.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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 …
Suggested Courses

762 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