I have had to change a section of my email template to accommodate some dynamic text, but when I test my template Outlook Windows is not getting any top
and bottom
padding from each <p>
- I know I probably need a ghost table, but I am not sure where to put it and configure it:
<tr>
<td style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing: 0;" role="presentation">
<tr>
<td height="8" style="background-color: #21c6b8;"></td>
</tr>
<tr>
<td style="padding: 0 20px 0 20px; text-align: center;">
<p style="font-size: 16px; font-weight: bold; padding: 10px 0 5px 0;">Title / Teitl</p>
</td>
</tr>
<!-- REPEAT BLOCK STARTS-->
<tr>
<td style="padding: 0 20px 0 20px; text-align: center;">
<p style="font-size: 14px;"><i>[[title]]</i></p>
</td>
</tr>
<!-- REPEAT BLOCK ENDS -->
<tr>
<td style="padding-bottom: 20px; text-align: center;"></td>
</tr>
<tr>
<td height="8" style="background-color: #21c6b8;"></td>
</tr>
</table>
</td>
</tr>
In my code I have been using ghost tables such as this:
<!--[if (gte mso 9|(IE))]>
<table width="100%" style="border-spacing: 0;" role="presentation">
<tr>
<td valign="top" style="padding: 0">
<![endif]-->
Here is how my new section looks in Outlook Windows:
Outlook Windows only accepts padding on <td>
elements. For <p>
, it will only accept margins.
So for the top one for example you could just change padding to margin in the <p>
like so:
<td style="padding: 0 20px 0 20px; text-align: center;">
<p style="font-size: 16px; font-weight: bold; margin: 10px 0 5px 0;">Title / Teitl</p>
</td>