So I've been wrangling all week with a newsletter redesign for my company, tweaking the html to make it display semi-consistently across email clients. I've made good use of www.litmus.com for much of this. This is the last bug remaining and it continues to elude me. We have a horizontal navbar across the top. Here's a stripped down version with only one <td>
, normally there are 5 of them:
<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle">
<tr valign="middle">
<td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >
<a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere">
<span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span>
</a>
</td>
</tr>
</table>
As you can see, inline styles up the wazoo. It displays fine on all of the litmus tests except for Outlook 2002, 2007 and 2013, in which valign="middle" gets ignored and the link text gets pushed to the top like this: http://i.imgur.com/a48ObB8.jpg
Several sources, both here and elsewhere, suggest that valign works in outlook, but I've tried the valign="middle"
attribute on every tag I can think of, and several css vertical-align: middle;
s as well. Is this no longer true? And if so, is there a work around of some sort?
I think the issue is the line-height you are setting. I found that when the line-height is equal to the td height, valign=middle will not work properly in outlook.
The following will not middle-align the text:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;">
Link Text Here
</td>
</tr>
</table>
THIS WILL:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;">
Link Text Here
</td>
</tr>
</table>