I'm using a table to fake a bulleted list in my HTML email. It looks great in every client except Outlook 2010, which adds extra white space between each row:
The table cellpadding and cellspacing is set to 0 and I tried explicitly setting the line-height in each table row.
The code:
<table width="100%" style="table-layout: fixed; margin-bottom: 21px; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
</tr>
</table>
The problem is the margin-bottom style applied to the parent table. Outlook applies that style to the child elements so each td has a bottom margin of 21px. Remove the bottom margin and use a blank table row to fake a bottom margin instead:
<table width="100%" class="list-table" style="table-layout: fixed; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
</tr>
<tr>
<td width="100%" height="21" colspan="2" style="border-collapse: collapse;"> </td>
</tr>
</table>
Related
screenshot of issue When I print my document every table prints an extra cell right under the table (but just one). I have looked everywhere on the net to find a solution. So far, I haven't been able to find it. I'm using Chrome. I haven't tried anything significant because I can't find the issue on the internet yet. Maybe it is just me. please help.
Here is my code:
<style>
body {padding: 0px;
margin: 0px;
text-align: center;}
.noborder th {font-weight: bold;
border: none;
padding: 0px, 3px;}
.noborder td {font-weight: regular;
border: none;
padding: 0px, 3px;}
table.border {empty-cells:show;}
.border th {font-weight: bold;
padding: 0px, 3px;}
.border td {font-weight: regular;
border: 1px solid gray; }
</style>
<table class="noborder" width="100%">
<th width="50%">Phone: 855-359-9999
<th width="50%">Fax: 888-965-1964
<tr width="100%">
</table>
<p>
<table class="noborder" width="100%">
<tr width="100%">
<td width="15%">___ Outpatient
<td width="15%">___ Office
<td width="15%">___ Inpatient
<td width="15%">___ DME
<td width="40%">___ Ambulatory Surgery Center
</table>
<p>
<table class="border" width="100%" cellspacing="0">
<tr width="100%">
<td width="50%"><b>ICD-10 CM Diagnosis</b>
<td width="50%"><b>Code</b>
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%"><b>Description</b>
<td width="50%"><b>Code</b>
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="100%" colspan="2"><b>Special circumstances:</b>
<tr width="100%">
<td width="100%" colspan="2">
<tr width="100%">
<td width="100%" colspan="2">
<tr width="100%">
<td width="100%" colspan="2"><b>Clinical Information:</b>
</table>
I guess you forgot to add closing tags to tr and td, like:
<tr>
<td>
some stuff between
</td>
</tr>
I copy pasted your code into the text editor and it does not have closing tags but I don't have a problem as shown on your image. I opened the inspector in the browser and saw that browser put all the closing tags.
Just add closing tags to all trs and tds, and everything should work as intended.
I am experience a gap between the header and the body only in Outlook 2013. Below is a screen-shot to hot it looks in outlook:
Here is what it should look like:
My header HTML code:
<!-- start header -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" width="580" style="font-family:Arial,Helvetica,sans-serif" >
<tr>
<td width="241" height="51" valign="top" height="51" style="line-height: 51px;">
<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
</td>
<td width="179" height="51" valign="top" bgcolor="#00b0ed" style="background:#00b0ed;" style="line-height: 51px;" ></td>
<td width="1" height="51" valign="top" style="line-height: 51px;" ></td>
<td width="159" height="51" valign="top" style=" text-align:center; font-size:14px; " style="line-height: 51px;" >
<table cellspacing="0" cellpadding="0" width="159" style="font-family:Arial,Helvetica,sans-serif; text-align:center;" border="0" height="51">
<tr>
<td width="159" align="left" valign="top" height="12" style="line-height:12px;" ><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/invitation.png" style="display:block;" height="12"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="5"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="text-align:center; background:#00B0ED; " height="26" > <span style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px ">INVITATION</span></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="left" valign="top" colspan="4" height="1"><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford/images/blank.jpg" height='1' width="1" style="display:block;"></td>
</tr>
</table>
<!-- end header -->
This will probably help:
http://www.campaignmonitor.com/blog/post/3795/outlook-2013-says-no-to-empty-table-cells
Basically, it's a padding issue with outlook - and it's related to font sizing. That's quite an old problem from waaaay back in the day of table based website layouts and the old tricks of setting font size to 1px, or using nasty old 1x1px transparent gif files :)
Use this in your stylesheet
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
And inline for each table declare
table border="0" cellpadding="0" cellspacing="0"
To get the 1 pixel white space between each cell use nested tables. and declare the table like so
table border="1" border-color="#ffffff" cellpadding="0" cellspacing="0"
I've built an email which features images surrounded by a "polaroid" style border and caption. To do that I built a table around the image with white backgrounds and all works fine except on Outlook 2007 and 2010. Here's how it should look (Outlook 2011 version):
And here's how it displays in 07/10, pushing the tables out of the width of the page and increasing the width of the tables hugely:
Here's the code I've used - the tables are the only elements that cause problems:
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding: 9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td class="mcnImageContent" valign="top" style="width:164px;background-color:white;padding-right: 9px;padding-left: 9px;padding-top: 9px;padding-bottom:9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<table>
<tr>
<td style="max-width:160px;border: 1px solid #b3b3b3;">
<img mc:edit="product 1" class="mcnImage" width="100%" style="max-width:160px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" mc:edit="Caption 1" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;font-family: Helvetica;font-size: 11px;line-height: 150%;text-align: left;">
<center> </center>
</td>
</tr>
<tr>
<td valign="top" style="padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;text-align: left;">
<img align="center" height="18" src="http://gallery.mailchimp.com/004beaebbdbc9392458d4bde2/images/shadow.1.gif" style="height: 18px;width:100%;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Your table's width is being set to 100% [of its parent container].
<table ... width="100%" ...></table>
The full code hasn't been given, but I can only assume its parent has a width greater than that of the content above.
You can't reliably uses css classes or IDs within an HTML email.
You should only use inline css styles and even them keep them to a bare minimum to ensure maximum email client compatibility.
I don't think using the max-width property will be doing you any favours either. I'd recommend simply setting the actual width on height on the images using the regular width and heights html tags.
Here's a good reference for html emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Try using the following code (I suggest using this as an embedded style), this always fixes a lot of my Outlook 2007/2010/2013 spacing issues:
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
I have a table defined as
<table width="600" cellspacing="0" cellpadding="0">
<table border="0" cellspacing="0" cellpadding="25" width="600">
<tr>
<td width="160" bgcolor="#efefef">Text</td>
<td width="340" bgcolor="#ffffff">Text</td>
</tr>
</table>
<tr>
<td colspan="2"><img src="image.jpg"></td>
</tr>
</table>
Here for the image I have a gray shaded area of width 210px and the rest is white.
Now this should get aliged with the first cell since it has width 160px + 50px (cellpadding) = 210px (in total)
However, outlook 2007 does not pick up this cellpadding. How can I get this to align in outlook 2007?
first of all I think your code should change
<table width="600" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="0" cellpadding="25" width="600">
<tr>
<td width="160" bgcolor="#efefef">Text</td>
<td width="340" bgcolor="#ffffff">Text</td>
</tr>
</table>
</td></tr>
<tr>
<td colspan="2"><img src="image.jpg"></td>
</tr>
</table>
I have a table that has worked correctly for many years, but recently the table widths have gone slightly haywire. It's an old HTML site I maintain but didn't write (it should be rewritten in CSS) but the owner doesn't want to do it yet and it's a very large site.
No changes were made to the table structure, yet the width=x % is no longer working correctly on part of it. I know the table is messy and overly complex
I've stared at this and I know I'm missing something easy. There are some errors in the table, but they have not prevented any rendering engine from displaying it properly until recently (client noticed it a few days ago).
The exact problem is that a nested table (see *problem below) is not allocating space on a 25%, x%, 25% basis. The x% is slightly under 50%, but the two outer columns should be 25% each (when the browser is large enough) and they used to scale equally. Now, the left column is always larger than the right proportionally, the middle expands and shrinks with the size of the browser, but the right column is always too small and crowded.
I'm sorry for the code. It's a messy table and I wanted to cut what I thought was extraneous but leave the structure.
I'm stumped. Any help would be appreciated.
CLARIFICATION. This table has 3 nested tables within it. Those 3 tables used to resize as you changed the size of the browser window, but now only 2 of the 3 are scaling. The left-most and the center tables scale and re-size as part of the whole; the right-most nested table no longer scales and has shrunk below the 25% width threshold as specified. This is a new phenomenon, but none of the base code has been changed (I verified from a 1 year old copy of the page).
<table width="100%" height="500" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" height="54" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="5" height="21" align="left" valign="top" bgcolor="#FFFFFF"><some images><br /> </td>
</tr>
<tr>
<td colspan="5" height="25" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="3" width="100%" height="1" align="left" valign="middle" </td>
</tr>
<tr> ************PROBLEM STARTS HERE ***************
<td colspan="1" width="25%" height="485" valign="middle" align="right" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
<td width="15" align="right" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" align="center" valign="top">
<table width="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" height="485" align="center" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" width="25%" valign="middle" align="right" bgcolor="#84968A"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" align="right" valign="top"></td>
<td align="left" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
</tr>
</table></td>
</tr>
</table>
Actually, problem lies in the row above where you have "problem starts here":
<td colspan="3" width="100%" height="1" align="left" valign="middle"> </td>
You are saying that 3 columns are 100% of the width. Then, your next row has 5 cells.