How to vertical align image and text cross client email templates
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="20"> <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&开发者_StackOverflow中文版gt;
</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?
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>
Use this code
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="20" align="left" valign="top"> <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>
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.
加载中,请稍侯......
精彩评论