CODEWITHSUNDEEP
htmlcsshtml-email
user1417094
user1417094

Reputation: 271

How to vertical align image and text cross client email templates

<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?

Upvotes: 27

Views: 90669

Answers (3)

Jitender
Jitender

Reputation: 7971

Use this code

<table cellspacing="0" cellpadding="0" border="0">
   <tbody>
   <tr>
   <td width="20" align="left" valign="top">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td>
   <td align="left" 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>

Upvotes: 6

David Meister
David Meister

Reputation: 4082

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>

Upvotes: 34

mikevoermans
mikevoermans

Reputation: 4007

First as a general practice with emails you'll want to put display block and typically border:none on all images. Secondly you might be running into trouble with defaults. Set all styles on the td's. If I need some specific spacing I'll set the font size and line height to 1px on the td to avoid inheritence. You might also need valign top on your first td. I can't really tell what part isn't lining up from the description. Good luck with your emails.

Upvotes: 6

Related Questions