Written by me@grafxflow
11 Oct, 2012
10
10,865
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) |
||||||
|
|
23 Apr, 2018
20 Feb, 2010
27 Jul, 2013
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
11 Jul, 2023
21 Jun, 2023
Views: 166,590
Views: 40,466
Views: 37,234
Views: 33,737
10 Response
Bruno
07 Feb 2013
Thanks for that. Really helped :)
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
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:
UPDATE: I have edited the code in the post.
Matchew
16 Jul 2014
You're a diamond. Thank you!
Anand
03 Sep 2014
Thanks... :)
Eddy
30 Sep 2014
Save my day thank you!
Marc
16 Jan 2015
Just perfect, thnx a ton!
Marc
16 Jan 2015
Hmm, works for the bullets.
However, the font changes to a default font...
me@grafxflow
16 Jan 2015
Hi Marc,
You should be able to correct this via your CSS or using inline CSS.
Such as...
sathishsakthi
26 Feb 2015
Thank you bro it's really save my day