CSS Styling won't work in outlook 2010?

Question

If I use styling in my outlook, it won't work.

how can I fix it? I am talking about this style code:

<div id="BodyID" Style=" word-spacing:2px;  min-width:0px; min-height:0px;max-width:693px; max-height:490px;  height:485px; background-color:#f4f4f4; border:1px solid #e4e4e4; font-family:Arial;">

score 28 · Accepted Answer · answered Nov 29 '11 at 12:31

Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.

Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.

throw back to table based layouts all the way for emails – albert Nov 29 '11 at 12:42 — albert, Nov 29 '11 at 12:42

score 11 · Answer 2 · answered Nov 29 '11 at 12:27

11

Maybe this can help http://www.campaignmonitor.com/css/ It's a table, what is supported in E-Mails

edit
min|max-width|height not supported

answered Nov 29 '11 at 12:27

yunzen

32,854
11
73
106

3

If you want a layout in your Outlook mailing, than you **must** use HTML `tables` – yunzen Nov 29 '11 at 12:33
@yunzen is correct, you need to use tables. Outlook 2010 - and presumably Outlook 2013 - doesn't support padding or margins on DIV or P tags, just on tables (TD basically). – Darren Nov 19 '12 at 19:55

score 4 · Answer 3 · answered Dec 19 '11 at 23:18

4

http://htmlemailboilerplate.com/

I've been using that as a base for my HTML email campaigns.

And the link yunzen posted to campaign monitor is a great resource.

answered Dec 19 '11 at 23:18

Christopher Marshall

10,678
10
55
94

2

great answer to the question behind the question. – Nathan Jan 22 '14 at 01:51

score 2 · Answer 4 · answered Dec 19 '11 at 21:13

2

The MSDN article superlime linked to tells the sad story: for whatever incomprehensible reasons, Microsoft reverted nearly 10 years in their handling of HTML email w/Outlook2007, and did not see fit to fix it in 2010.

Having taken the trouble to design a well-formatted HTML layout for rest of the universe of mail user agents, I do see one saving workaround, which is what I'm going to direct my users to, rather than spend my time trying to reconstruct ancient HTML:

Use the VIEW IN BROWSER option Outlook offers for reading an email message. That re-assembles the HTML as intended.

answered Dec 19 '11 at 21:13

fortboise

1,002
12
10

Is there a way to create a link for the view in browser option? I've seen many emails that read "Click here if you're having trouble reading this email" but I always thought that just brought you to a copy on the website itself. – Mark Ransom Dec 19 '11 at 23:24
Good question. I wondered. And noticed that Outlook2010 on win7 doesn't ALWAYS give me that "view in browser" option above the message header info. Apparently it knows when it's screwing things up! [This fellow here](http://www.emailsignature.eu/phpBB2/how-to-get-view-in-browser-link-in-outlook-2010-t1550.html) says you can at least ensure a recipient will get the option by purposely putting in something outlook will break an empty, styled span: – fortboise Dec 21 '11 at 01:19
3

This will work: `#outlook a{padding:0;}`. It basically does nothing at all but forces outlook to display the "view in browser" link. – acme Nov 21 '13 at 15:30

score 0 · Answer 5 · answered May 11 '15 at 14:22

Try adding 3 columns table, click on the example link below.

Example: Link

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="400">
            <table border="1" cellspacing="0" width="100%">
                <tr>
                    <td>
                        Content here...
                    </td>
                </tr>
            </table>
        </td>
         <td></td>
     </tr>
</table>

CSS Styling won't work in outlook 2010?

5 Answers5

Linked