Even though I don't code emails anymore, I wanted to share a fix for an Outlook bug I encountered awhile back. An extra unordered list bullet appears at the end of the list even though the code itself is correct and no empty <li> elements are present. I learned this particular bug happens when the unordered list is the last element in an editable region, say a table cell. A situation where an unordered list is the last element doesn't happen often, hence why I hadn't encountered it before. The workaround is to trick Outlook in thinking there is another element after the unordered list. Insert this code snippet directly after the closing </ul> tag: <div style="display:none;"> </div>
Here's an example:
<p>Here is some text inside a paragraph tag</p>
<ul>
<li>List bullet 1</li>
<li>List bullet 2</li>
<li>List bullet 3</li>
</ul>
<div style="display:none;"> </div>
I hope this saves someone some time.
Top comments (5)
Amazing find and brillant of you to document that. We were going insane.
Thanks for this. We were having a similar issue - albeit with the extra bullets being rendered before the actual bullet in the list. I solved the problem by adding a blank/hidden div just before the content in the proper bullet. I'd never have figured out what on earth Outlook was doing without this post.
Love you man! It really works! So simply but soooo useful! And this trick really saved my time.
I saw that nobody thanked you yet and then deliberately created account here just to say THANK U.
You're welcome. I'm really glad you found it useful.
Amazingly simple fix for an issue that would have had me up all night looking for a solution. Big thankyou!!