How do I get MS Outlook to accept the CSS style display:block?

Question

I am composing an HTML email using a service (MailChimp). The way that MailChimp marks up headings is to use a SPAN tag and gives the tag the inline style of display:block.

MS Outlook 2010 ignores this style. I cannot find any work around. Thus, headings wrap, breaking the desired page display.

Yes, I know that Outlook uses MS Word to display HTML.

Assume that I cannot intervene and hand edit the markup.

How do I get MS Outlook to accept the CSS style display:block and display a SPAN tag as a block level element?

You don't have control over how Outlook renders HTML styling. You need to fix the HTML source to make it Outlook-compatible. — SliverNinja - MSFT, Jan 24 '12 at 15:16
What are you trying to make it look like? Outlook doesn't do anything with the 'display' attribute, but you can work around it with tables. — Dan Blows, Jan 24 '12 at 16:40
Sorry, just saw that you can't actually change the HTML. Why is that? — Dan Blows, Jan 24 '12 at 16:41
Blowski - I am setting up a template to hand off to a MailChimp user, so it's best of they don't hand edit HTML. — mmcglynn, Jan 24 '12 at 18:16

score 26 · Accepted Answer · answered Jan 24 '12 at 16:42

26

The CSS display attribute is not supported in this version of MS Outlook.

Here's "The Book" on what you can and cannot use:

campaignmonitor.com/css/

Basically, if you can't change your mark-up to a natively-block item, you're stuck.

answered Jan 24 '12 at 16:42

Diodeus - James MacFarlane

112,730
33
157
176

score 1 · Answer 2 · answered Jan 06 '14 at 21:02

I found myself in this exact situation: needing to create header styles that displayed correctly in outlook without the ability to edit the HTML because I'm handing the template off to a client.

I imagine you've already solved this, but to anyone else who spent several hours trying to answer this question and stumbles across this thread, here's how I fixed it:

Delete Mailchimp's default H1, H2, etc.
Create your own header styles (I named them Header, Sub-Header, etc. just to avoid confusion)
Use the new header styles as you wish. The new headings display as blocks.

I'm not exactly sure what's going on under the hood as I can't inspect in Outlook, but my guess is that by not using the default styles either Mailchimp wraps the header text in divs instead of spans.

Can you explain how you do step no. 2. I know how to style a tag in the MC-code editor but don't know to add a new tag or how to replace one with another. — Maya Kathrine Andersen, Jan 15 '14 at 13:33

score 1 · Answer 3 · answered Jan 24 '12 at 15:19

1

The best thing is to do it the old fashion way unfortunately. =[ Use tables over tables. so tables=blocks.

answered Jan 24 '12 at 15:19

lenard-magentoinks

19
3

I'm using tables for structure. The markup is coming from the WYSIWYG editor, where no tables are available. Again, assume that i cannot intervene and hand edit the markup. – mmcglynn Jan 24 '12 at 15:40

How do I get MS Outlook to accept the CSS style display:block?

3 Answers3

Linked