Outlook 2013 rendering issues

Hi CM Forum,

I am working on a responsive template for our company newsletter and am running into some odd rendering issues when it comes to Outlook 2013.

I have a section where two tables are used to create columns and then one on a mobile device. Based upon the CM tutorial

And it is this area which causes the issue.

This shows the design and spam test results for Outlook 2013

The area in question is just below the "Main feature introduction" and causes two purple vertical strips.

I have implemented some of the Outlook 2013 fixes discussed on CM.

Things I have found:

- The purple colour seems to be coming from the background colour style applied to the body tag, though there are many background colour tags throughout the holding tables, tr's and td's which should stop this.

- The tables which have the align left attribute applied to them to allow the 2-1 column responsiveness seems to be the ones which cause this. Once this tag is removed the problem goes away.

I have done over 30 tests and am getting no where. Does any one have any ideas??

Also, please ignore the attractive colour scheme on the tests, its just so I can narrow down which bits of code are being applied to where :-)

Many thanks,

Mark Kennerley

roshodgekiss roshodgekiss, 5 years ago

Hi there Mark, you may want to take a look at our earlier blog post (and comments) on removing spaces around tables in Outlook, as well as Email on Acid's workaround. You will find some potential fixes in there.

As for the background 'margin' around the email, this has been an issue since Outlook 2007. Unfortunately, this gap is built into the interface. You may be better making the body background color red as well, so the upper portion of the email doesn't look so strange in Outlook '07+.

So, that's good and bad news there, I'm sorry to say. Let us know how you go, Mark!

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
MarkKennerley MarkKennerley, 5 years ago

Hi Ros,

Oh my, I am so happy right now!

After 42 failing Design and Spam Tests this pretty much resolved the issue straight away.

I had to zero the margin and padding applied to the new p tags added to the first td in the aligned table but apart from that nothing else.

It also allowed me to remove a width fix I put in place because the tables were stacking in Outlook.

Now to strip out all the bloated code I added to try and fix this.

Thanks again!!!

roshodgekiss roshodgekiss, 5 years ago

Haha, Mark - thank you so much, that's so satisfying! All the best with your campaign :D

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free