CODEWITHSUNDEEP
htmlemailgmail
murraycs
murraycs

Reputation: 11

HTML email in Gmail - table contents appear outside the cell

I have created an email newsletter for a client and the contents display correctly in my browser when testing the page and in Hotmail when opening the email. However, Gmail is consistently displaying the page incorrectly. I have a two-column layout, and the left column is just fine. The right column, however, does not contain the contents - they are instead placed off to the right outside the cell (as shown by using Chrome's developer tools). This happens no matter what the contents are. I've tried viewing it in Gmail through Firefox and still get the error. I'm stumped.

I read these two pages trying to get some help, but neither one addresses why the contents of a cell would display outside of it. It's the column with the Lorem Ipsum that is not displaying correctly. Here's what it should look like: http://www.murraysampson.net/michele/newsletter.html And displayed incorrectly: http://cl.ly/2e3D0z3A432g3r1x1a31

Here's my table:

<table width="900" height="541" border="0" cellpadding="0" cellspacing="0" style="border:solid thin">
  <tr>
 <td colspan="2"><div align="center"><img src="http://www.murraysampson.net/michele/header.jpg" alt="Header" width="875" height="114" /></div></td>
</tr>
<tr>
<td height="24" colspan="2" style="padding:0px; border-top:solid thin; border-bottom:solid thin"><p style="float:left; pading-top:10px; padding-bottom:0px; margin-top:10px; marging-bottom:0px"><span style="font-family: arial; color: #FF6600; margin-left:15px">An occasional snapshot of our activities</span></p><p style="float:right; pading-top:0px; padding-bottom:0px; margin-top:10px; marging-bottom:0px;font-family: arial; color: #666666;"><span style="margin-right:15px">January 2012</span></p></td>
</tr>
<tr>
<td width="574" height="600"><img src="http://www.murraysampson.net/michele/content.jpg" width="560" height="500" style="padding-top:0px; margin-left:15px" /></td>
<td width="326"><span style="font-family: arial; color: #FF6600; margin-right:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus metus, facilisis in tincidunt in, sodales id turpis. Quisque bibendum risus eget odio ultricies accumsan. Vivamus vitae venenatis nulla. Fusce sed nisl eu libero bibendum tincidunt quis sed sapien. In sed est vel ante venenatis scelerisque at at nulla. In hac habitasse platea dictumst. Mauris at tortor lorem, vehicula vestibulum erat. Aliquam ut odio nunc, in volutpat risus.</span>
<img src="http://www.murraysampson.net/michele/signature.jpg" alt="Signature" width="170" height="62" align="bottom" /><img src="http://www.murraysampson.net/michele/portrait.jpg" alt="Portrait" width="114" height="154" align="top" /></td>
</tr>
</table>

Upvotes: 1

Views: 3672

Answers (2)

Ocelot Carter
Ocelot Carter

Reputation: 11

I had this problem even after adding the "display:block" thing, and here's how I solved it:

If the contents of cells are too big for the column width, they cause them to enlarge. Most of my text was on the large side, so I thought maybe the non-breaking spaces I had added to empty table cells was the issue. I added a "font-size:9px" attribute to the table, so that the non-breaking spaces would be smaller. This fixed the problem.

Upvotes: 1

JonLim
JonLim

Reputation: 1413

This question has been asked before.

Here is the answer from that question from mahalie:

The specific answer to your question is that Gmail adds extra space to table cells which only contain an image. To fix this add style="display:block" to these images.

Campaign Monitor is a great resources, as is Mailchimp.com. Both provide several guides, template examples etc.

Upvotes: 0

Related Questions