Foundation for Emails (Ink) menu item separators - email

Question

I am building an email template using Foundation for Emails and I want to place a " • " between my menu items.
Everything works well across all email clients, except in Outlook - the dot between the menu items somehow drops below the whole menu like so:
Outlook:
Here is my Ink code:
<row>
<columns small="12" large="4">
<center>
<menu class="small-vertical">
<item href="#">
<span class="nav-item">
<font color="#010101">
menu item 1
</font>
</span>
</item>
<item>
<p style="color: #8d8e90;">•</p>
</item>
<item href="#">
<span class="nav-item">
<font color="#010101">
menu item 2
</font>
</span>
</item>
<item>
<p style="color: #8d8e90;">•</p>
</item>
<item href="#">
<span class="nav-item">
<font color="#010101">
menu item 3
</font>
</span>
</item>
</menu>
</center>
</columns>
</row>
How can I bypass this issue?

Answer 1

A bullet is an extended character and needs an alternative code to display correctly with Outlook and other html and email clients.
Extended characters are those which are not in the standard ASCII character set, which uses 7-bit characters and thus has values 0 to 127. ASCII Codes 0 to 31 and 127 are non-printing control characters, while codes 32 to 126 match the keys on a US keyboard ("a", "A", etc.).
• is bolder and slightly higher than ·. You can also use a - dash. Either works in every recent version of Outlook and other email clients.
I took a look at your code again and realized you're doing a lot of things that Outlook doesn't understand, like <item>. Outlook really doesn't use HTML5, so replacing the bullet with a better bullet may not do much. You don't include your HTML code, CSS code, just a snippet, which makes it impossible to determine what else is wrong.
Good luck.

Answer 2

How about removing the paragraph tags and adding in an item between items with href to display bullets? I have a feeling it might work.
For bullet points you can try either of these:
• or •
They both work the same way Below is your code, I just changed paragraph to item and hope it works.
<row>
<columns small="12" large="4">
<center>
<menu class="small-vertical">
<item href="#">
<span class="nav-item">
<font color="#010101">
menu item 1
</font>
</span>
</item>
<item>
<item style="color: #8d8e90;">•</item>
</item>
<item href="#">
<span class="nav-item">
<font color="#010101">
menu item 2
</font>
</span>
</item>
<item>
<item style="color: #8d8e90;">•</item>
</item>
<item href="#">
<span class="nav-item">
<font color="#010101">
menu item 3
</font>
</span>
</item>
</menu>
</center>
</columns>
</row>
Hope it works.