Unwanted space beneath UL tags in html email

HTML & CSS
1

Hi everyone,

In the code block below, there is too much space beneath the first table row (TR) and the second one. Even though I have zeroed out the margin and padding on the UL tag (and have applied 10 pixels of padding on the TD tag), there is still too much unwanted space appearing in Microsoft Outlook 2007, 2010 and 2013 email clients. The 10 pixels of space is working in gmail, yahoo and Mac email clients - it just seems to be these earlier versions of outlook where it won’t render correctly (by adding extra space). I’ve tried putting padding zero on the LI tags but that doesn’t help.

I just wondered if anyone could provide any advice?

Thanks in advance.

<tr>
  <td style="font:12px/20px Helvetica, Arial, sans-serif; color:#565656; padding:0 0 10px;">
  <ul style="padding-left: 1.2em; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;">
    <li>Text goes here</li>
     <li>Text goes here</li>
    <li>Text goes here</li>
     <li>Text goes here</li>
  </ul>
  </td>
</tr>
<tr>
  <td style="font:12px/20px Helvetica, Arial, sans-serif; color:#565656; padding:0 0 20px; margin-top: 0px;">
  <strong> Date:</strong> Text goes here
  </td>
</tr>
2

Outlook seems to ignore margins on some elements and that seems to be the case for list items. Look at his Sitepoint question from 10 years ago. Therefore when I used to code html emails I do not use lists if space is an important issue.

Just use bullet points and text separated by breaks or paragraphs (although again some email clients may or may not render the margin on the p element so a break or div would be the best solution). Or use a nested table with 2 cells in each table row (one for the bullet • and one for the content).

Semantics have to go out of the window if you want to support outlook.

Otherwise just live with the extra space :slight_smile:

3

Thanks for the reply. Yeah the nested table with 2 cells in each row might be the only workaround. If I do decide to keep the bullets though (and live with the space), there’s just one other issue in Outlook - I have a padding-left: 1.2em; on the ul tag. This successfully removes the left indent on the bullets for email clients other than earlier versions of Outlook and makes the bullets flush left - is there a way to achieve the same result in Outlook?

4

Have you tried list-style:inside on the list elements to make the bullets inline?

Can’t remember if that works or not but will of course allow text to wrap under the bullet.

I think the table approach is the only sure way to do this.

5

I’ll give that a try - thanks again.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.