Html newsletter in gmail

Question

Hi,

Im coding html newsletter and faced up with strange thing in gmail. Code:

<table cellpadding="0" cellspacing="0" width="700" height="122">
                <tr>
                    <td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_top_border.gif"&gt;&lt;/td&gt;
                </tr>
                <tr>                    
                    <td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_left_border.gif"&gt;&lt;/td&gt;
                    <td valign="top" height="106" width="689">
                        some content
                    </td>
                    <td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_right_border.gif"&gt;&lt;/td&gt;
                </tr>
                <tr>
                    <td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_bot_border.gif"&gt;&lt;/td&gt;
                </tr>
            </table>

Gmail screenshot:

Screenshot from other email clients:

Any hints?

Your help would be appreciated.

Answer 1

In regard to the change of fonts, it somewhat seems like the 'other client' might show a non-HTML body and I think gmail supports HTML by default.

Have you set the content-data to be HTML? For instance in c# you might need to set:

MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;

Answer 2

It's a browser issue. When you put an image inside a table, the image should be an inline element, sitting on a text line. That means there will be space below it (for parts of a line of text that go below the baseline, ie. descenders) and GMail's rendering is ‘correct’.

However, in Quirks mode, as well as “almost standards” mode, an image that is alone in a cell behaves like a block instead of an inline element, so it doesn't get the extra spacing. It looks like the ‘other’ client is in Quirks mode, as it has reset the font size inside the table (a typical Quirks mode bug).

Normally you want to avoid Quirks mode at all costs, so you'd use Standards mode and fix up the img-in-table problem by setting CSS display: block or vertical-align:-anything-but-baseline on the <img> elements, or, better, dump the ugly layout-table and use some background images instead. However of course in a e-mail context your opportunities for styling are strictly limited.

So yeah, try setting style="display: block" on the images to try to make them display the same in Quirks vs Standards if you like, but be aware that this is the least of your problems when dealing with HTML mail. You will face much, much worse breakages than that. HTML e-mail completely sucks on every level; if you have any chance to get out of it, by just mailing a link to a proper web page, then do that.