html5 Icon Logo
me@grafxflow

Written by me@grafxflow

11 Oct, 2012

10

10,366

Email template ul tags don't work in outlook FIX

Certain versions of Outlook have issues when using the ul tag with bullet points not appearing.

So if the following was placed in an email html template, you would see nothing except the text.

<ul>
    <li>Point 1</li>
    <li>Point 2</li>
    <li>Point 3</li>
</ul>

The easiest solution is to use a table and the bullet point html character ().

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top">•</td>
        <td valign="top">Point 1</td>
    </tr>
    <tr>
        <td valign="top">•</td>
        <td valign="top">Point 2</td>
    </tr>
    <tr>
        <td valign="top">•</td>
        <td valign="top">Point 3</td>
    </tr>
</table>

Here are both examples, remembering that you would need to use CSS to make them look similar:

 UL Tags (Don't work in Outlook)

 Table (Do work in Outlook)

  • Point 1
  • Point 2
  • Point 3
Point 1
Point 2
Point 3

Add comment

10 Response

  1. avatar

    Bruno

    07 Feb 2013
    Thanks for that. Really helped :)
  2. avatar

    Matchew

    16 Jul 2014
    It works great for me until it the line breaks to two lines. I've kept my points very short! Thank you
  3. avatar

    me@grafxflow

    16 Jul 2014
    I think you mean that the paragraphs and bullet sit vertically centred rather than at the top. Add the following:


    &bull;
    Point 1


    UPDATE: I have edited the code in the post.
  4. avatar

    Matchew

    16 Jul 2014
    You're a diamond. Thank you!
  5. avatar

    Anand

    03 Sep 2014
    Thanks... :)
  6. avatar

    Eddy

    30 Sep 2014
    Save my day thank you!
  7. avatar

    Marc

    16 Jan 2015
    Just perfect, thnx a ton!
  8. avatar

    Marc

    16 Jan 2015
    Hmm, works for the bullets.
    However, the font changes to a default font...
  9. avatar

    me@grafxflow

    16 Jan 2015
    Hi Marc,

    You should be able to correct this via your CSS or using inline CSS.

    Such as...


    &bull;


    your content here....


  10. avatar

    sathishsakthi

    26 Feb 2015
    Thank you bro it's really save my day

Smart Search

132 Following
50 Followers

me@grafxflow

Hull, United Kingdom

I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Follow