My web application sends HTML-based e-mail to users.
I've created a HTML e-mail template (based off a template provided by MailChimp which is supposedly designed to work in any browser/email client).
When I send it using SendGrid
, it arrives and displays perfectly on my Apple iPhone 4 but doesn't display correctly when I test it in Gmail/Google Apps (using both Firefox and Google Chrome).
The HTML code snippet that isn't working properly:
<tr>
<td align="center" valign="top" style="padding-top:0;">
<table border="0" cellpadding="15" cellspacing="0" class="templateButton3">
<tr>
<td valign="middle" class="templateButtonContent">
<div mc:edit="std_content01">
<a href="http://www.url.com/blah" target="_blank">Button Text</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
The CSS applied here is:
.templateButton3{
-moz-border-radius:3px;
-webkit-border-radius:3px;
/*@editable*/ background-color:#d34843;
/*@editable*/ border:0;
border-collapse:separate !important;
border-radius:3px;
}
What am I doing wrong here? Is this an annoying side effect of using Google Apps/Gmail?