Search code examples
htmloutlookhtml-email

outlook 2010 <li> styles and <br> are ignored

Having a problem with HTML resolving in Outlook 2010.

There should be an equal space between each <li> I have sucesfully done this with the UL style applied inline as you can see below of line-height:2; .

However this disrupted an <li> with multiple lines -- making it look strange because the <li> with multiple lines should online be line-height:1; so you can tell it's the same <li> but in Outlook 2010 the below resolves with <li> #2 following the first <li> being immediately below the first <li> with no space.

As you can see I am trying padding-top:5px; inline I have also tried padding-bottom: on the top element, I have also tried <br> and </br> and border-bottom:3px solid #fff; and I cannot create this break space correctly between these <li>'s nothing resolves in Outlook 2010. I'm about to try a white image, but would rather not, any suggestions?

<ul style="line-height: 2;">
  <li style="line-height:1;border-bottom:2px solid #fff;">lorim impsum ipsum lorim impsum ipsum<br>
    lorim impsum ipsum
</li>
  <li><span style="padding-top:5px;display:block;">lorim impsum ipsumlorim impsum ipsum</span></li>

Basically the above resolves like:

• lorim impsum ipsum lorim impsum ipsum
  lorim impsum ipsum 
• lorim impsum ipsum lorim impsum ipsum

and it needs to be: (in Outlook, Gmail and Web it's fine)

• lorim impsum ipsum lorim impsum ipsum
  lorim impsum ipsum 

• lorim impsum ipsum lorim impsum ipsum
Solution

  • Outlook removes styles in li tags, and one of those is padding. Use this guide for more info on CSS accepted in different email clients - https://www.campaignmonitor.com/css/

    The alternative would be to use a table with tds using the &bull; in the left td and the copy on the right, like below:

    <table>
<tr>
  <td style="line-height:1;border-bottom:2px solid #fff;">&bull;</td>
<td>lorim impsum ipsum lorim impsum ipsum<br>
    lorim impsum ipsum
</td>
</tr>
<tr>
  <td>&bull;</td>
<td><span style="padding-top:5px;display:block;">lorim impsum ipsumlorim impsum ipsum</span></td>
</tr>
</table>