Numbered lists do not work using PHP, CKEditor and Outlook

Question

When I write text using CKEditor in my application and format it as a numbered list, it displays correctly, for example

Answers to your questions: 1. First Answer 2. Second Answer 

and the html behind is

 <p><span style="color:#1f497d">Answers to your questions:</span></p> <ol> <li><span style="color:#1f497d">First Answer</span></li> <li><span style="color:#1f497d">Second Answer</span></li> </ol> 

but when I send this text to Outlook (my current version is 2016), it does not show the numbers, and the text of the numbered list items is formatted in a smaller font size, and then another text, as shown in the image below,

When I check the code behind using "show source", it is displayed as follows

 <p style="margin: 0;padding: 0;font-size: 100%;vertical-align: bottom;font-family: Arial, Verdana, sans-serif;line-height:1.2"><span style="color:#1f497d">Answers to your questions</span></p> <ol style="margin-right:0px;margin: 0;padding: 0;font-size: 100%;vertical-align: bottom;font-family: Arial, Verdana, sans-serif;line-height:1.2"> <li style="margin: 0;padding: 0;font-family: Arial, Verdana, sans-serif;line-height:1.4;vertical-align:middle;font-size:12px"><span style="color:#1f497d">First Answer</span></li> <li style="margin: 0;padding: 0;font-family: Arial, Verdana, sans-serif;line-height:1.4;vertical-align:middle;font-size:12px"><span style="color:#1f497d">Second Answer</span></li> </ol> 

Perhaps Outlook does not understand the tag, or do you have any other suggestions for me, what could be the problem in this case?

I appreciate any help!

Answer 1

Here's the JS script: http://jsfiddle.net/GHC7m/81/

Outlook does not understand OL / UL tags, and also adds an extra addition to P tags. To format the text, I turned them into div tags. They should be included in any text, including text in TD. Outlook also has some oddities around padding / margin vs how other email rendering clients handle these properties, if I remember correctly, but you should look for more information about this on SO.

Never try to apply padding or fields to TD or TR tags, this will ruin your table. You must also add the font size, font size and line height in all of your divs.

  <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d">Answers to your questions:</div> <table cellspacing="0" cellpadding="0"> <tr><td width="30" align="center" valign="top"> <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d;text-align:center;">1.</div> </td> <td width="200" align="left" valign="top"> <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d;"> First answer </div> </td> </tr> <tr><td width="30" align="center" valign="top"> <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d;text-align: center;">2.</div> </td> <td width="200" align="left" valign="top"> <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d"> Second answer </div> </td> </tr> </table>