How to vertical align image and text cross client email templates

css, html, html-email

Solution

Long story short, in the testing that I've been doing this afternoon it looks like outlook supports the valign property on td elements but gmail and the rest want the vertical-align css rule. Gmail only supports inline styles, not style tags, so you have to do something like this:

<table>
  <tr>
    <td valign="top" style="vertical-align:top;"></td>
  </tr>
</table>

Also make sure you declare a doctype! Make sure this is above your `<html>` element:

<!DOCTYPE html>

Problem

``` <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="20">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td> <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td> </tr> </tbody> </table> ``` I have the above code in Outlook. It displays fine but in Gmail, Yahoo and Hotmail, the bullets and text do not align vertically on top, it seems like there is padding round the top of the text. Any ideas?

Original source