How do I get MS Outlook to accept the CSS style display:block?
Solution 1
The CSS display
attribute is not supported in this version of MS Outlook.
Here's "The Book" on what you can and cannot use:
Basically, if you can't change your mark-up to a natively-block item, you're stuck.
Solution 2
The best thing is to do it the old fashion way unfortunately. =[ Use tables over tables. so tables=blocks.
Solution 3
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.
mmcglynn
Web Developer from Providence, RI. Doing my best to ask good questions. Hoping for civility and reason when I don't.
Updated on July 09, 2022Comments
-
mmcglynn almost 2 years
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 ofdisplay: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 aSPAN
tag as a block level element? -
mmcglynn over 12 yearsI'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.
-
Maya Kathrine Andersen over 10 yearsCan 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.