Getting text to display vertically centred in Live Hotmail

I wondered if anyone can help me with a frustrating issue I have in trying to get some text display as vertically centred within a defined cell in Hotmail Live. My email design contains a row of buttons and text links each within their own defined cell using the <td> tag. The buttons display fine but the text displays at the top of its cell. This problem only occurs with Hotmail Live it displays fine in Outlook, Google Mail, Yahoo Mail and AOL Mail. Here is a snippet of code for some of the text I have been using:

<td valign="middle" width="110" style="text-align: left;">
<p style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px; margin:0px 0px 0px 0px;">
<a href="link" style="color:#000000; text-decoration:none;">Fact sheet</a>
</p>           
</td>

I have tried several variations of the align attribute and values but to no avail? Any suggestions would be much appreciated.

Many Thanks

Jody

BThies BThies, 6 years ago

Can you post more of the code containing the other elements? (You can e-mail privately as well)  Something surrounding it is most likely creating the issue.

Also, <p> tags tend to display different padding/margin above and below depending on e-mail client.  Although both are not fully supported, when using them to define a <p> tag you should list each property individually  (margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px;, etc.).


Brian Thies
Professional Email Developer
Thies Publishing
jodygibbons, 6 years ago

Hi Brian

Thanks for your response I have attached the code for the whole row, hope this is OK. I see what your saying when listing the property's associated with the <p> tag I will implemented this on here and on any future designs. Thanks for the tip. Below is the code for the row:

<td valign="middle" width="40" style="text-align: left;"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Download brochure" src="add in source" style="margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;" width="40" height="52"/></a></td>
                                                   
<td valign="middle" width="110" style="text-align: left;"><p style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px; margin:0px 0px 0px 0px;"><a href="link" style="color:#000000; text-decoration:none;">Brochure</a></p></td>

<td valign="middle" width="40" style="text-align: left;"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Download a factsheet" src="source" style="margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;" width="40" height="52"/></a></td>

<td valign="middle" width="110" style="text-align: left;"><p style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px; margin:0px 0px 0px 0px;"><a href="link" style="color:#000000; text-decoration:none;">Fact sheet</a></p></td>

<td valign="middle" width="40" style="text-align: left;"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Go to the website" src="source" style="margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;" width="40" height="52"/></a></td>

<td valign="middle" width="110" style="text-align: left;"><p style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px; margin:0px 0px 0px 0px;"><a href="link" style="color:#000000; text-decoration:none;">Website</a></p></td>

<td valign="middle" width="40" style="text-align: left;"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Download case study" src="source" style="margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;" width="40" height="52"/></a></td>

<td valign="middle" width="110" style="text-align: left;"><p style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px; margin:0px 0px 0px 0px;"><a href="link" style="color:#000000; text-decoration:none;">Case study</a></p></td>

Many Thanks

Jody

BThies BThies, 6 years ago

Try this instead:

<td width="40"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Download brochure" src="add in source" style="display:block" border="0" width="40" height="52"/></a></td>
                                             
<td width="110" valign="middle"><div align="left" style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px;"><a href="link" style="color:#000000; text-decoration:none;">Brochure</a></div></td>

<td width="40"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Download a factsheet" src="source" style="display:block" border="0" width="40" height="52"/></a></td>

<td width="110" valign="middle"><div align="left" style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px;"><a href="link" style="color:#000000; text-decoration:none;">Fact sheet</a></div></td>

<td width="40" style="text-align: left;"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Go to the website" src="source" style="display:block" border="0" width="40" height="52"/></a></td>

<td width="110" valign="middle"><div align="left" style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px;"><a href="link" style="color:#000000; text-decoration:none;">Website</a></div></td>

<td width="40"><a href="link" style="color:#000000; text-decoration:none;"><img alt="Download case study" src="source" style="display:block" border="0" width="40" height="52"/></a></td>

<td width="110" valign="middle"><div align="left" style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size:12px;"><a href="link" style="color:#000000; text-decoration:none;">Case study</a></div></td>

Unless a <p> is really needed, <div>'s work just fine without having to set margins/paddings.


Brian Thies
Professional Email Developer
Thies Publishing
jodygibbons, 6 years ago

Hi Brian,

Thanks for that, it works a treat - much appreciated. I will certainly take your tip on board concerning the <div> and <p> tags because its displays flawlessly now. Thanks helping me resolve this issue. I checked out your website - great work!

Cheers
Jody

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098