Outlook not displaying CSS properly

ProgrammingEnthusiast 0
Viewed 21

I have an automated email that I am sending using Power Automate. However, my inline CSS does not entirely appear in Outlook although it does appear in web browser.

Also, the img tag only displays alt text rather than the picture. This is another deviation between Outlook and web browser.

<tr align="center" style="height: 70">
        <td style="font-family: sans-serif; font-size: 24px; color: black; background-color: slategray;">
            <a href="https://app.powerbi.com" target="_blank">
                <img src="https://sharepoint.com/picture.png" alt="picture" width="400" height="200">
            </a>
        </td>
    </tr>

Any assistance on how to correct these issues would be much appreciated. Thanks!

outlook css html
1 Answers

Email coding is very, very different from coding for modern web browsers. Outlook desktop email clients are special, outstanding among all of email clients. They don't support a lot of features: display and max-width properties, media queries, they display line-height differently, for instance. And many more. And it's quite hard to debug them since there's no devtools like in web email clients.

You can use Canimail and Campaign Monitor CSS guide to check email clients support for different features but the data there is slightly outdated, but still actual.

I also highly recommend you to search for Outlooks and Windows 10 Email tips on Litmus blog and Email on acid blog.

And I always test emails in an online tool that makes screenshots approximately in 50-100 variations of email clients. My choice is Testi@ because of price that is 5 times lower than Litmus and Email on Acid, but they are nice too.

In addition to automated tests with screenshots I always test emails manually sending them to my dozen of email addresses in different email clients and look at them closely on desktop and mobile apps, desktop and mobile web email clients, on iPhone and Android devices.

Images could be blocked by Outlooks so a user should find an option to enable them for current email above the email content or enable them by default somewhere in settings.

Max Samusevich0
Related