Outlook 2007/2010/2013 Email display issue

Question

The issue I am having is illustrated in the image below. The icons in the left column are not vertically aligned correctly in Outlook 2007, 2010 and 2013. I have tried messing with line-height/font-size to no avail.

I have drawn the table cell/row borders to illustrate the structure I am using. Each icon has padding-top:5px to align correctly with text in right column.

This is the code for a row:

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;padding-top: 5px;margin: 0;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
    data held to ransom in the last 12 months*.</td>
</tr>

Any ideas?

Answer 1

If padding-top doesn't work for the td, try applying the css to the img itself. Edit your img's css (refer to code below). Remove the padding-top of the td.

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;margin-top: 5px;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
data held to ransom in the last 12 months*.</td>
</tr>

If giving a top margin for the img still doesn't work, try trading it a padding or even with a border-top (with a 5px border width)

Answer 2

why not just use valign="middle" in your table cell that contain images?

<tr>
  <td class="icon" width="59" valign="middle">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>

UPDATE: Here is an example for if you have more text. Your image will remain aligned at the top.

<table width="325" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td class="icon" valign="top" width="59" valign="middle" style="padding-top:5px;">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td valign="top" class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>
</table>