Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Valign not working in Outlook HTML Emails

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;" >&nbsp;
            <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>&nbsp;
        </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?

like image 390
aurath Avatar asked Jun 04 '13 20:06

aurath


People also ask

How use valign in HTML?

The HTML valign attribute is used to specify the vertical alignment of the text in the element. This attribute supports many table related elements such as <tr>,<td>,<tbody>,<col> and <tfoot>. Attribute value: top: It sets the content to the top-align.

Can you embed an HTML email in Outlook?

You can inject HTML code into the message body via the Insert as Text option; tab Insert-> (Attach) File-> select the created htm-file-> press the down arrow on the Insert button-> Insert as Text.

How do I read an HTML message in Outlook?

In Microsoft Outlook, double-click to open an email. You'll see an “Actions” menu under the “Message” tab. Click on that menu and select the “Other Actions,” then click on “View Source” to see the HTML code. Regardless of what your default text editor is, the HTML file will open as a .


1 Answers

Short answer: Use padding-top, and padding-bottom with a negative value.

Long answer: If you want to write a cross-compatible email don't use valign at all. The problem you're having is stemming from somewhere else because by default the text should be displaying vertically centered in the cell.

Get your code back to a point where it's defaulting to the center and wherever you need something different use nested tables, cellpadding, margin, and padding to get the placement you're looking for.

like image 70
davidcondrey Avatar answered Sep 22 '22 06:09

davidcondrey