Why CSS class not working in send email body

[ShehanMP]

I have below HTML code in my send email body in Power Automate. All the other classes are working except for 'ol.margin'

<style>
ol.margin{
margin-top:0;
}
span.color{
font-family: Calibri;
color: #3366ff;
</style>

<span class="color"><strong>What Does this Mean to Me</strong></span>
<ol class="margin">
<li>List 1</li>
<li>List 2</li>
</ol>

any suggestions?

[Expiscornovus]

Hi @ShehanMP,

I have just tested a couple of things and it looks like it recognizes the OL with the margin class. 

Have you tested the HTML code in a HTML editor or the browser. Does it render like you expected?

I suspect it is more a CSS config issue. The margin-top is not behaving like you are expecting it to behave. You might want to change those settings.

1. Tested your code in a flow and W3Schools. The output looks the same in the e-mail.

2. Tested another example were I added another property, list-style-type with the value upper-roman. The style is recognized and applied to the unordered list with the Margin class.

As you can see it also recognizes that style in the output below.

[ShehanMP]

Hi Dennis @Expiscornovus ,

Thank you for your reply.

I have tested this in W3Schools and it's working perfectly.

It's not working when it's added to flow. Please refer to the screenshots below.

[Expiscornovus]

Hi @ShehanMP,

I see you added the html and body tags. I am not really sure those are needed.

Can you test it with the code like below?

[ShehanMP]

@Expiscornovus same result ☹️

I don't know why, but that's the only thing which is not working in the whole email body.

[Expiscornovus]

Hi @ShehanMP,

Just to double check. Are you opening the e-mail in the web browser or in the Outlook client?

I was looking at the e-mail in https://outlook.office.com/mail, might be worth checking over there as well?

[ShehanMP]

Hi @Expiscornovus ,

You are absolutely right. It is working in OWA.

But not in Outlook Desktop Client. Any reason behind that?

[Expiscornovus]

Hi @ShehanMP,

First of all it is worth checking the Outlook options > Mail section. It is worth checking if you are missing any setting related to HTML rendering.

But it can also simply be that we are trying to use an element which isn't supported in Outlook Desktop Client. Have tried something like padding instead, that might work?

[ChadVKealey]

The HTML engine in Outlook for Windows is ancient and seems to ignore many of today's "common" CSS properties. It's not as bad as when it used Word as the HTML engine, but it's also far from "good". This has caused untold pain to our team that handles mass-mails to our org. The people generating the content use all the latest HTML/CSS tricks, but they need to convert all of those tags to the small set that OL for Windows actually supports. 

Hopefully, the rumored "cross platform" Outlook that's in development will fix this. I have no proof, but strongly suspect that new version will basically be a re-skinned and polished copy of the Outlook PWA.