Menu icon Foundation
Outlook 2010 v14 width issue

Hello, I've created a template that has been fully tested in Litmus and renders perfectly. However, a client is seeing an issue in Outlook 2010 where the inner tables that Foundations sets at 100% are pushing outside of the email template container to fill the full width of the Outlook window.

I think Outlook is ignoring the set width (638px) of the container and simply resizing the inner tables. It seems Outlook may simply ignore the CSS declaration for width. I've tried wrapping the template in a <wrapper> and setting the size the old fashion was <wrapper width="638"> but that doesn't seem to work.

I've also thought to add a conditional statement and remove all reference to 100% widths. I'm running out of ideas and unfortunately the template has to work in Outlook 2010. 

I'd be forever grateful for any help.

Outlook width issueOutlook 2010 width issue

Hello, I've created a template that has been fully tested in Litmus and renders perfectly. However, a client is seeing an issue in Outlook 2010 where the inner tables that Foundations sets at 100% are pushing outside of the email template container to fill the full width of the Outlook window.

I think Outlook is ignoring the set width (638px) of the container and simply resizing the inner tables. It seems Outlook may simply ignore the CSS declaration for width. I've tried wrapping the template in a <wrapper> and setting the size the old fashion was <wrapper width="638"> but that doesn't seem to work.

I've also thought to add a conditional statement and remove all reference to 100% widths. I'm running out of ideas and unfortunately the template has to work in Outlook 2010. 

I'd be forever grateful for any help.

Eric Peacock over 2 years ago

Outlook 2010 will definitely ignore the CSS-specified width on a table. The old school HTML width="x" attribute is the only way to force a specified width on a table for mail clients that don't fully handle compliant CSS.

As I understand it, Foundation for Emails is designed to expand to proper preset widths without having to rely on manually specifying HTML-based table width attributes, but if something in your content somehow is sized over the desired width it will force table expansion in clients like Outlook where standard CSS support is incomplete.

Still, it's really hard to know what the cause is without evaluating each specific case in detail. It may not be worth the effort unless you've got a high number of Outlook 2010 recipients.
 
So other things might be forcing your tables to expand in Outlook, and they wouldn't be tied to CSS or the default Foundation framework. It can be as simple as a syntax typo, or an improper non-CSS width for an image or an improperly structured custom nested table. These days with hidpi images it's pretty easy to have mismatched width attributes cause non-CSS clients to blow up your tables with oversized images.

A good check for any mysterious issue is to validate your HTML and CSS in W3C (or other) validation tools and know to ignore/filter errors that come from the messy markup email requires. Look for parse errors, extraneous table/row/column elements, unclosed tags, stray characters, etc. Even on the web a mis-parsed syntax error can create serious voodoo.

I hope that helps.

mtfloundation about 1 year ago

Since my original post I've managed to solve the problem. Or at least I believe I have. I had no luck contacting the Foundation team as obviously they must be very busy. I also contacted Litmus to get to the bottom of the issue. The 120dpi scaling issue is seperate to the issue I was encoutering.

The problem is some newer Microsoft laptops have a default zoom level set at 125%. And when mixed with Outlook 2010 v14 the combination reeks havoc with the Foundation code. It only seems to be related to this combination and would often be missed. It's easy to ignore this configuration but I've encountered three very large blue chip clients still use this set up. There is no testing environment I can find that cater for this setting. Litmus does not have this testing setup. So I've tested directly with our clients and seem to have solved it.

I simply insert some Microsoft specific code under the closing </style> tag of the compiled code (I use the SasS verison of Foundation)... This seems to work... Annoyingly I can't paste it in here.