0

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

heres a screenshot from gmail

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Adam G
  • 357
  • 2
  • 6
  • 20
  • treat html emails like old 90's style html 4 transitional tables. you can use css but risk it being stripped. If you write it out like they used to back in the day you're most likely to have it display as expected in most mail clients. – Kai Qing Jun 04 '14 at 00:07

2 Answers2

0

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.

Community
  • 1
  • 1
lindsay
  • 972
  • 2
  • 11
  • 21
0

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