Foundation-emails: <wrapper> breaks layout in Outlook 2007, 2010, 2013

[jasonlmann]

I'm using Inky and I have the following wrapper in my markup:
<wrapper class="hero-image"> <container> <row class="collapse"> <columns small="12"> <img src="{{root}}assets/img/[email protected]" alt="Turner Farm barn at night" width="580" height="386" /> <h1>Turner Farm Barn Suppers</h1> </columns> </row> </container> </wrapper>

When testing in the browser, it performs as expected. However, when I test through Litmus, the sections of my email that use are aligned hard left, while the rest of the email looks properly centered.

For example:

This appears to happen in Outlook 2007, 2010, and 2013. It does _not_ happen in Outlook 2011.

[rafibomb]

What happens if you add the align="center" attribute to the container inside the wrapper?

[jasonlmann]

I added align="center" but got the same result.

[jasonlmann]

I found something that seems to work, though. I swapped the wrapper and container. The example below also shows my attempt to get text over a background image working in Outlook using Campaign Monitor's bulletproof background technique. It works, except I can't figure out a way to resize the background image (which is @ 2x for retina displays.)
Code:

<container>
  <wrapper class="hero-image">
    <row class="collapse">
       <columns small="12">

         <td background="{{root}}assets/img/[email protected]" bgcolor="#30506B" width="580" height="386" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:386px;">
    <v:fill type="tile" src="{{root}}assets/img/[email protected]" color="#30506B" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
    <h1>Turner Farm Barn Suppers</h1>
  </div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
             <!-- <img src="{{root}}assets/img/[email protected]" alt="Turner Farm barn at night" width="580" height="386" />
           <h1>Turner Farm Barn Suppers</h1> -->
        </columns>
    </row>
  </wrapper>
</container>

Result: (working image on top, broken version immediately below)

[allanpope]

I've also got the same issue when using wrapper. The content is always left aligned in those browsers.
Also tried using align="center" but got the same result.

The code I'm using is:

<wrapper class="header-message"> <container> <spacer size="3"></spacer> <row> <p class="text-center"><small>Some text</small></p> </row> <spacer size="4"></spacer> </container> </wrapper>```

[brandonbarringer]

Adding align="center" on the <container>does not work when when using inky, because the converter does not account for attributes added to the element.
Adding align="center" on the compiled <table class="container"> does work.

I fixed this issue by hard coding align="center" in the componentsFactory.js file to the expander in the inky node module. This can probably be fixed more elegantly by the foundation team by using a check for attributes then adding those into the return statement using the format function.

[bc-ian]

@brandonbarringer that works great thanks. For those of you that need more straightforward instructions here is how you make the fix:
Navigate to - node_modules>inky>lib>componentFactory.js

Line 56 change from:

return format('<table class="%s"><tbody><tr><td>%s</td></tr></tbody></table>', classes.join(' '), inner);

to:

return format('<table class="%s" align="center"><tbody><tr><td>%s</td></tr></tbody></table>', classes.join(' '), inner);

[camaech]

I have the same issue.

Edit: confirmed that @bc-ian fix works. Thanks mate!

[rafibomb]

@bc-ian This should have gotten into the component. Are you able to submit a PR to add this to Inky? Even editing the GitHub file will do the trick and adding it to the test case.

https://github.com/zurb/inky/tree/master/lib

[bc-ian]

@rafibomb edited the file in github and submitted.

[rafibomb]

@bc-ian Sorry, didn't see the PR over there. Are you still able to add it?

[rafibomb]

Ok added this in https://github.com/zurb/inky/commit/2d986ff6d75e8c9e3e4bc5cdd219b808f44dd334