Html email fails in Gmail

Question

My html email fails to work in gmail. The tables are all stuffed up!

http://jsfiddle.net/8s6qA/

 <td><table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td class="w100" width="100" bgcolor="#000001" border="0"></td>
            <td class="w400 article-content" width="400" bgcolor="#000001" border="0" style="color:#FFFFFF !important"><span style="text-align:center;">
              <p>&nbsp;</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu tempus nulla. Duis eu tellus tristique, mollis felis at, pharetra libero. Suspendisse pretium justo quis diam ullamcorper venenatis. Duis ac est est. Donec justo magna, varius eu lorem nec, varius lobortis dolor. Mauris et est mauris. Nulla facilisi. </p>
              </span></td>
            <td class="w100" width="100" bgcolor="#000001" border="0"></td>
          <tr>
            <td class="w100" width="100" bgcolor="#000001" border="0"></td>
            <td class="w400 article-content" width="400" bgcolor="#000001" border="0" style="color:#FFFFFF !important"><span style="text-align:center;">
              <p>When: <span style="color:#ef4541; text-align:center;">xxxxxx</span></p>
              <p>Time: <span style="color:#ef4541; text-align:center;">xxxxxx</span></p>
              <p>Where: <span style="color:#ef4541; text-align:center;">xxxxx.</span><br />
                <span style="color:#FFFFFF; text-align:center; font-size:12px">(xxxxx).</p>
              <p>RSVP: <span style="color:#ef4541; text-align:center;">xxxxx</span></p>
              <p>Dress code: <span style="color:#ef4541; text-align:center;">xxxxx</span></p>
              <p>&nbsp;</p>
              </span></td>
            <td class="w100" width="100" bgcolor="#000001" border="0"></td>
          </tr>
            </tr>

        </table></td>
      <table cellpaddi

I don't know how to fix it. I'm new to HTML emails.

Answer 1

In my experience, I've had little success in using CSS in style tags with HTML emails. In fact, clients like Gmail strip out style takes entirely (take a look here for a discussion around it article ).

My suggestion is to move all of you styles to inline. It's super ugly, and it feels super hacky, but you will get better results.

Campaign monitor gives a great overview for building cross client emails. Take a look here .

Answer 2

On your table set a width using using the table width attribute(width="200") or a min-width in the inline style of the table. If you establish a height as well you can ensure that it displays more accurately.

https://github.com/Ankiewicz/HTML-Email-Library-Template