cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ShehanMP
Frequent Visitor

Why CSS class not working in send email body

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?

8 REPLIES 8
Expiscornovus
Super User
Super User

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.

 

w3schools_testrun.png

 

w3schools_testrun01.png

 

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.

 

w3schools_testrun02.png

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

 

w3schools_testrun03.png

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.

 

ShehanMP_0-1645514980813.png

 

ShehanMP_1-1645515014608.png

 

Expiscornovus
Super User
Super User

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?

bodyhtml_only.png

ShehanMP
Frequent Visitor

@Expiscornovus same result ☹️

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

Expiscornovus
Super User
Super User

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?

 

Hi @Expiscornovus ,

 

You are absolutely right. It is working in OWA.

ShehanMP_0-1645537197658.png

 

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

Expiscornovus
Super User
Super User

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?

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.

Helpful resources

Announcements
October Events

Mark Your Calendars

So many events happening this month - don't miss out!

 WHAT’S NEXT AT MICROSOFT IGNITE 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Register for a Free Workshop.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

Users online (5,128)