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