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 1 year 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.

Taylor Shaw about 2 months ago

The answers shared here gave me a better idea regarding Outlook 2010 v14 width issue. I have been wondering about the same for quite a while now. Thanks for sharing the question here. Do share more such relevant questions. best clipping path service

ritariya 9 days ago

I was constantly searching for solving the issues in the width in the outlook 2010 v14. But I could not find any reason behind that issues. Finally, I got the reason and causes, but still, I didn't get the solution to solve the issues. It was from this site I came to know about the solution to my search. I got certain methodologies and restrictions to solve the issues.  tour amsterdam

mtfloundation 9 days 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.