CSS not showing in outlook

html css outlook html-email

19,633

4 things right off the bat:

1.) Inline your stylesheets. Most clients will either erase the stylesheet or rewrite it.

2.) Use Tables not Divs. Tables are much more reliable across clients.

3.) Almost all email clients will completely ignore Max-Width. To get around this with Outlook, create a conditional statement with a 650 width table defined ( ) or use media queries and make it Responsive.

4.) Also Outlook does not recognize Text Shadow

Your best bet is to build a 100% width table (height is useless and usually winds up breaking the layout anyway) with the background color you wish. This combined with assigning the color to the body (not always supported, but never hurts to add) should give you the background you are looking to create.

From there just create another table inside with the dimensions you want. Outlook usually ignores margin and padding unless using "Cellpadding" or "Cellspacing" HTML attributes. Using those attributes or inlining the CSS are the best bets for you there.

I seperated out the CSS as declaring individually helps support. Also added some good styling to include for cross client support and made it responsive with media queries.

Sample Code:

<html>
<head>

<style type="text/css">

/* Client-specific Styles and Fixes */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; line-height: 100% !important;}

    /*TABLET STYLES*/
@media only screen and (max-width: 479px) {
    table[class=Responsive] {width: 100% !important;}
}
    /*MOBILE STYLES*/
@media only screen and (max-width: 479px) {
    table[class=Responsive] {width: 100% !important;}
}
    </style>
</head>
<body yahoo="fix" bgcolor="#F7F7F7" width="100%" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center" style="border-width:1px; border-style:solid; border-color:#E4E4E4;">
<tr>
<td align="center">
<table width="650" class="Responsive" cellpadding="15" cellspacing="0" border="0" style="font-family:Georgia, Times New Roman, Times, Serif; font-size:12px; color:#888888;">
<tr>
<td align="center" style="font-family:Georgia, Times New Roman, Times, Serif; font-size:12px; color:#888888;"><h2>New message from {{ user }} ( {{ email }} )</h2>
 <p>Message below:</p>
 <p>{{ message }}</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

I personally don't use header tags or even really P tags, but left them in for you. Hope this helps.

19,633

Author by

Jon

Updated on June 09, 2022

Comments

Jon almost 2 years

I have an email template:

<html>
    <head>
        <style>
            #outer_content {
                background-color: #F7F7F7;
                border: 1px solid #E4E4E4;
                width: 100%;
                height: 100%;
            }

            #email_content {
                max-width: 650px;
                font: 12px Georgia, "Times New Roman", Times, serif;
                color: #888;
                text-shadow: 1px 1px 1px #FFF;
                margin-left: 25px;
                margin-top: 15px;
                margin-right: 25px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="outer_content">
            <div id="email_content">
                <h2>New message from {{ user }} ( {{ email }} )</h2>
                <p>Message below:</p>
                <p>{{ message }}</p>
            </div>
        </div>
    </body>
</html>

which displays fine in the browser, but outlook seems to get confused by the margins. I have tried using padding, but that doesn't help. Are there any css tricks I need to know in order to get around these issues? enter image description here