How to Make Bulleted Lists Work in Outlook (2007-10-13-16)

Outlook (Desktop Client) can be compared to that reserved kinda person who always stays aloof and never joins the amiable group of other email clients. However, it is interesting to know that despite this, it still enjoys 6% of email client share in the market (Litmus Email Analytics – April 2017). As an implication, we cannot overlook its rendering issues howsoever.

Let’s discuss one of the major problems of Outlook that bothers several email developers out there.

The Problem of Unordered Lists in Outlook

A queer rendering challenge that Outlook puts forth is that of unordered lists. While all the other email clients work great when it comes to lists, Outlook doesn’t show bullets with <ul> and <li> tags.

Check out the screenshot below:

Outlook 2003 won’t present this problem, but more recent versions of Outlook desktop client like Outlook 2007, 2010, 2013, and 2016 will invariably create an issue when it comes to the basic HTML tags of unordered lists.

The Workaround

To get rid of this problem, Campaign Monitor published a workaround which is quite successful but a bit too long.

We bring to you a simple workaround to beat this challenge.

Just insert the below-mentioned code to resolve the issue.

/*This is for Outlook 2007-10-13-16*/
<!– [if gte mso 9]>
<style>
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
</style>
<![endif]–>
/*End for Outlook 2007-10-13-16*/

/*This is for Other all email clients*/
li {text-align:-webkit-match-parent; display:list-item;}
/*End for Other all email clients*/

Once you add this code, Outlook will display bullet points in your list… and that’s the end of your struggle. [We hope] 🙂

Here’s how it will look after the workaround:

Wrapping Up

Have you been forced to contend with any other challenges while working with Outlook?

Just get in touch with us and let’s talk about it.