0

This is my code for progress list 

<div style="width:50%;padding:2px">
                                <div style="float:left;width:15%;margin-top:20px">
                                    <ul style="list-style:none;padding:0px">
                                        <li style="color:#b3b3b3;text-transform:uppercase;height:100px;width:auto">
                                            <div style="width:16px;height:16px;border-radius:50%;border:2px solid #FF370C;background-color:#FF370C"></div>
                                            <div style="height:80px;border-left:1px solid #07c200;margin-left:9px"></div>
                                        </li>
                                        <li style="color:#FF370C;text-transform:uppercase;height:100px;width:auto">
                                            <div style="width:16px;height:16px;border:2px solid #8cc63f;border-radius:50%;background-color:#8cc63f"></div>
                                            <div style="height:80px;border-left:1px solid #07c200;margin-left:9px"></div>
                                        </li>
                                        <li style="color:#b3b3b3;text-transform:uppercase;height:100px;width:auto">
                                        <div style="width:16px;height:16px;border:2px solid #8cc63f;border-radius:50%;background-color:#8cc63f"></div>
                                    </ul>
                                </div>

Fiddle Example

As you can see in example , there are ul list like a progress .
I use this html as body of email sending , it's ok for web-mails like Gmail , Outlook , etc . Everything render correctly.
But for Desktop mails ( eg. Outlook Desktop Client , Windows Mail Client ) , it just show small bullet list without progress line .
Is there any way to fix it ?
I want to know how to make bulletproof Progress List for all mail clients including Outlook Desktop and Windows Client Mail .

Steven Sann
  • 478
  • 1
  • 7
  • 27

1 Answers1

0

I’m afraid you could’t make bulletproof Progress List for all mail clients including Outlook Desktop and Windows Client Mail.

Float width and position CSS styles applied to div's do not work in Outlook.

For more information, you could reference this link:

Working with Outlook HTMLBody – a guide for Office developers

This is the primary reason while Tables are still used so heavily in Emails.

You can reference this link:

Div styles not working in Outlook Emails

Alina Li
  • 884
  • 1
  • 6
  • 5