CODEWITHSUNDEEP
htmlcssemailoutlook
AgentX
AgentX

Reputation: 1462

issue with ul tags in email rendered in outlook

I am trying to create an html template that will be sent out to users.The issue with the rendered email is that the lists are not being rendered correctly, the formatting and nested list structure is being lost. This issue is on Outlook, whereas the formatting is correct in browser.

I followed the following thread (Trouble with ol and ul tags in email sent with Outlook) and tried to mimic a list using a table. It works fine for a single list. But since I have nested lists, I am unable to get the rendering setup correctly.

I have followed the following approaches:

<table cellspacing="0" cellpadding="0">
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"></td> List Item 1: </td>
    </tr>
    <tr>
        <td></td> // Empty column, since sub-list should be at different level
        <td>
          <table cellspacing="0" cellpadding="0">
           <tr>
             <td width="20" align="center" valign="top">&#10004;</td>
             <td align="left" valign="top"></td> Nested List Item 1: </td>
           </tr>
         </table>
       </td>
   </tr>
</table>

I have also tried to nest the inner list by planing an extra empty column, instead of nested table.

<table cellspacing="0" cellpadding="0">
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"></td> List Item 1: </td>
    </tr>
    <tr>
        <td width="20"></td> // empty column 
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"></td> Nested List Item 1: </td>
    </tr>
</table>

But till now, I am unable to fix this. Any inputs would be appreciated.

Upvotes: 1

Views: 947

Answers (1)

trismi
trismi

Reputation: 780

The code has too many TDs being closed. Also, imo, the nested list should go inside the TD of the item it is nesting for, anyone looking at the code in the future will have a better understanding of how those things are linked if the nested list is inside the TD for the first item.

Here's a JSfiddle: https://jsfiddle.net/jabafpts/

And finally, code:

<table cellspacing="0" cellpadding="0">
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"> List Item 1
          <table cellspacing="0" cellpadding="0">
           <tr>
             <td width="20" align="center" valign="top">&#10004;</td>
             <td align="left" valign="top">Nested List Item 1 </td>
           </tr>
           <tr>
             <td width="20" align="center" valign="top">&#10004;</td>
             <td align="left" valign="top">Nested List Item 2 </td>
           </tr>
         </table>
        </td>
    </tr>
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"> List Item 2</td>
    </tr>
</table>

Upvotes: 2

Related Questions