[Compatibility] Outlook.com / Office 365 rendering

[iampstew]

Done a email testing using the new Zurb Email with Litmus, and the button rendering doesn't support the padding / spacing for the button, and also row > column collapses are not rendering correctly on Outlook.com / Office365 web clients, where as gmail and yahoo all look 100% accurate.

Outlook / Office 365

Yahoo / Gmail

Am using the Inky markup and NPM to build the email, all other clients work (Outlook 2000 onwards, iOs etc) are 100% way it should be... Just the MS web based email clients is causing a issue.

Here is my mark up for the footer

  <row class="collapse">
    <columns small="12" large="12">
      <callout class="secondary">     

        <!-- CONTENT GOES HERE -->

        <row class="collapse">
          <columns small="10" large="6">
            <row class="collapse">
                <columns small="12" large="3"><p style="color:#010101;margin:0px 0px 0px 0px;"><strong>Social</strong></p></columns>
                <columns small="3" large="2"><a href="#"><img src="assets/img/facebook.png" alt="Facebook" width="28"></a></columns>
                <columns small="3" large="2"><a href="#"><img src="assets/img/twitter.png" alt="Twitter" width="28"></a></columns>
                <columns small="3" large="2"><a href="#"><img src="assets/img/linkedin.png" alt="linkedin" width="28"></a></columns>
                <columns small="3" large="2"><a href="#"><img src="assets/img/google.png" alt="google" width="28"></a></columns>
            </row>     
          </columns>
          <columns small="4" large="6"></columns>
        </row>
      </callout>
    </columns>
  </row> 

And the button

<center> 
    <button href="#" class="secondary text-center">Book your free place today</button>
</center>

[iampstew]

Also span's seem to revert to the colour white as well..

[gbreux]

Maybe you should consider adding a table inside the <a> (or button if you use inky) tag and add the padding to the td. It does the trick for me but i had to review the global button foundation css to make it work for my own purpose (nothing generic enough though)

<button href="#" class="radius primary">
    <table>
        <tr>
            <td class="default">Label</td>
        </tr>
    </table>
</button>

[janzelc]

We're having a lot of trouble with emails rendering in conversation view. It sounds like the issue is not limited to Foundation for emails though.

[hteumeuleu]

Office 365 and Outlook.com strip <a> tags with empty or invalid href attributes. Try adding real URLs instead of # in your href attributes.

[rafibomb]

@hteumeuleu Good suggestion! We've seen this cause the buttons look different as well. Also invalid URL's will display next to the button.

[billiam13s]

We have the same issue when button wrapped around the centre tag. On Web Outlook (when message is nested) and Android 5.1.1 Outlook App, will display the button left aligned and link text in blue.