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?
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.
The best thing is to do it the old fashion way unfortunately. =[ Use tables over tables. so tables=blocks.
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.