Blog

11 Oct
2012

html5 Icon Logo

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
Posted in: < PHP and HTML and CSS >
me@grafxflow avatar

me@grafxflow


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!

Visitors also viewed these posts

10 Thoughts

  1. 07 Feb
    2013

    avatar

    Bruno

    Thanks for that. Really helped :)
  2. 16 Jul
    2014

    avatar

    Matchew

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

    avatar

    me@grafxflow

    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. 16 Jul
    2014

    avatar

    Matchew

    You're a diamond. Thank you!
  5. 03 Sep
    2014

    avatar

    Anand

    Thanks... :)
  6. 30 Sep
    2014

    avatar

    Eddy

    Save my day thank you!
  7. 16 Jan
    2015

    avatar

    Marc

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

    avatar

    Marc

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

    avatar

    me@grafxflow

    Hi Marc,

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

    Such as...


    &bull;


    your content here....


  10. 26 Feb
    2015

    avatar

    sathishsakthi

    Thank you bro it's really save my day

Add comment

Add comment