1

I have an html newsletter which works in most email carriers but the formatting is messed up in outlook. Here is a snippet of the email as this is the only part that is playing up:

<td align="left" valign="top" bgcolor="#666f87" style="background: #666f87;">
                                                    <div style="color: #cccccc;">
                                                        <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-bottom: 10px; margin-top: 0;"><strong>Social Media:</strong></p>
                                                        <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;">
                                                            <img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="facebook.png" alt="Facebook" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="#" title="Facebook" >Become a fan on Facebook</a></span>    
                                                        </p>
                                                        <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;">
                                                            <img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="twitter.png" alt="Twitter" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="#" title="Twitter" >Follow us on Twitter</a></span>    
                                                        </p>
                                                        <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;">
                                                            <img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="youtube.png" alt="Youtube" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="https://www.google.co.uk/" title="Youtube" >Watch us on Youtube</a></span>    
                                                        </p>
                                                    </div>
                                                </td>

The "vertical-align: middle;" style does not work in Outlook 2007/2010 and the text next to the image is appearing below the image. Does anyone know of a work around to get the text to align to the middle of the image? It works fine in other email clients. It is just Outlook that is causing problems.

LegacyTerror
  • 11
  • 1
  • 3

2 Answers2

1

i never success to use "vertical-align" statement in Outlook. I made table for hack this but it not really easy

Mr_DeLeTeD
  • 789
  • 1
  • 5
  • 17
0

Try this

<td align="left" valign="top" bgcolor="#666f87" style="background: #666f87;">
<table border="0" cellpadding="0" cellspacing="0" align="left" >
    <tr>
        <td align="left" colspan="3">
            <font style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-bottom: 10px; margin-top: 0;">
                <strong>Social Media:</strong>
            </font>
        </td>
    </tr>
    <tr>
        <td align="left">
            <img style="border:0; display: inline-block;" src="facebook.png" alt="Facebook" />
        </td>
        <td width="5" />
        <td align="left">
            <span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;">
                <a style="color: #cccccc;" href="#" title="Facebook" >
                Become a fan on Facebook
              </a>
        </span>
        </td>
    </tr>
    <tr>
        <td align="left" colspan="3" height="5" />
    </tr>
    <tr>
        <td align="left" valign="middle">
             <img style="border:0; display: inline-block;" src="twitter.png" alt="Twitter" />
        </td>
        <td width="5" />
        <td align="left">
            <span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;">
                <a style="color: #cccccc;" href="#" title="Twitterk" >
                    Follow us on Twitter
                </a>
            </span>
        </td>
    </tr>
    <tr>
        <td align="left" colspan="3" height="5" />
    </tr>
    <tr>
        <td align="left" valign="middle">
             <img style="border:0; display: inline-block;" src="youtube.png" alt="Youtube" />
        </td>
        <td width="5" />
        <td align="left">
            <span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;">
                <a style="color: #cccccc;" href="https://www.google.co.uk/" title="Youtube" >
                   Watch us on Youtube
                </a>
            </span>
        </td>
    </tr>
</table>

Sboniso Marcus Nzimande
  • 594
  • 3
  • 11
  • 24