sgthemi
Reputation: 31
HTML Email padding on top of table Outlook 2010
I am trying to build a somewhat complex html email and I am having issues with padding.
I have a table with three cells. The first cell is a spacing cell on the left. The second cell has a table within it to hold the text. The third cell has a CTA button (image).
The center cell has extra padding on top and I cannot figure out where it's coming from.
My goal is to have 4px of padding on top of the middle cell and 8px on top of the right cell. That way the border on the bottom of the header text in the middle cell ("Random Copy in Cell") lines up with the CTA button in the right cell.
When I test in Outlook 2010 and Gmail IOS app, it appears as though there is extra padding on top of the middle cell (it seems like double the indented padding).
<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
<tr>
<td width="142"></td>
<td width="310" style="padding: 0;">
<table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpading="0">
<tr>
<td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;">
Random Copy In Cell
</td>
</tr>
<tr>
<td>
<table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;">
<tr>
<!-- Model Specs -->
<td style="padding-bottom: 2px; padding-top: 4px">
<p style="font-size: 11px; margin-bottom: 0;">
<img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Headline Copy</span>
</p>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 10px; padding-bottom: 10px;">
<p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
- The first selling point
<br /> - The second selling point
<br /> - The third sell point/
<br /> The fourth selling point
<br /> - Selling point
</p>
</td>
<!-- Model Specs -->
</tr>
</table>
</td>
<td>
<table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;">
<tr>
<!-- Model Specs -->
<td style="padding-bottom: 0px; padding-top: 4px;">
<p style="font-size: 11px; margin-bottom: 0;">
<img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Another selling point</span>
<span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
<br /> - Another selling point </span>
<br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Selling point</span>
<br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Last selling point</span>
<br />
<br />
<br />
<br />
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="125" valign="top" style="padding-top: 8px;">
<a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a>
</td>
</tr></table>
Upvotes: 2
Views: 1115
Answers (1)
Ted Goas
Reputation: 7567
It's the style="padding-top: 8px;" in the last <td> that's causing the issue. Changing it to this solves the issue in Outlook 2007/10/13 and Gmail:
<td width="125" valign="top">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding-top: 8px;">
<a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a>
</td>
</tr>
</table>
</td>
Not sure what the code you have outside of your snippet, but adding a few CSS resets in the <head> will help bulletproof this further. I added some to your example, here is the code in its entirety:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
</head>
<body width="100%" style="margin: 0;">
<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
<tr>
<td width="142" style="line-height: 0; font-size: 0;"> </td>
<td width="310" valign="top" bgcolor="red">
<table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
<tr>
<td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;">
Random Copy In Cell
</td>
</tr>
<tr>
<td>
<table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;">
<tr>
<!-- Model Specs -->
<td style="padding-bottom: 2px; padding-top: 4px">
<p style="font-size: 11px; margin-bottom: 0;">
<img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Headline Copy</span>
</p>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 10px; padding-bottom: 10px;">
<p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
- The first selling point
<br /> - The second selling point
<br /> - The third sell point/
<br /> The fourth selling point
<br /> - Selling point
</p>
</td>
<!-- Model Specs -->
</tr>
</table>
</td>
<td>
<table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;">
<tr>
<!-- Model Specs -->
<td style="padding-bottom: 0px; padding-top: 4px;">
<p style="font-size: 11px; margin-bottom: 0;">
<img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Another selling point</span>
<span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
<br /> - Another selling point </span>
<br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Selling point</span>
<br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Last selling point</span>
<br />
<br />
<br />
<br />
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="125" valign="top">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding-top: 8px;">
<a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Upvotes: 1
Related Questions
- HTML table with TD padding in email
- Table style border- outlook 2010 adds an extra space
- Extra padding added to table element in Outlook Windows
- outlook 2013 add space between table
- Outlook table spacing in HTML email - no usual tricks working
- Outlook adding space in HTML email
- HTML email - white space between table rows
- HTML Email spaces between tables (Gmail and Outlook)
- Outlook 2007/2010 adding space inside table cell
- Formatting for outlook html email, specifically removing border spacing in tables