Outlook CSS/HTML help

HTML & CSS
1

Hello everyone,

I am using the following CSS code and I am trying to work out why it looks different in outlook compared to other clients. This is the code:

   .defiwell {
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            border: 1px solid #e3e3e3;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
        }

In most browsers and clients it looks fine with clear defined edges and borders

Here is what it looks like in Outlook:

image
image578×537 14.2 KB

could somebody please explain why it looks different?
Thanks so much for your help

2

Hi @marsnmarz, welcome to the forums

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

3

CSS in email, especially outlook, is a nightmare to get consistent and you need to go back to 1999 practices and use tables and td elements and attributes to create the spacing. Padding doesn’t work consistently in some email clients and all styling on divs is ignored in some versions of outlook.

You would be better downloading a free template and adjusting to your needs rather than writing from scratch unless you are an accomplished email developer.

2 Likes
4

Hello @marsnmarz,

Use Foundation for Emails 2 https://get.foundation/emails.html or MJML https://mjml.io/.
These are modern frameworks for creating responsive email templates with good documentation.

If you have doubts about the correct usage of the HTML elements and CSS properties while writing your personal code use Can I email https://www.caniemail.com/ service for checking the compatibility of the elements with different email clients.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.