Outlook text issue after downloading images

I am experiencing an issue with my HTML email. When i receive my email, everything looks fine. But when I download the images (and all images are loaded) some of the text lines in are cut off. This issue is not always visible. Sometimes I see it after opening the first time and some times only when I reopen the email.

http://closecontact.eu/wesley/outlook2007textissue.png

I have tried different solutions like adding extra styles (display block or line-height in percentage, etc), extra tags like a SPAN or P and the style code

mso-line-height-rule: exactly;

Does anyone has every seen this problem and/or found a solution? I think it might be an outlook "bug".

See the code below for 1 table row as in the print screen above.

<table border="0" cellpadding="0" cellspacing="0" width="253" bgcolor="00A1DE" style="background-color: #00A1DE;">
  <tr>
    <td align="left" valign="middle" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; text-decoration: none; text-align: left; line-height: 20px;" width="107"><a target="_blank" href="#" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; text-decoration: none; line-height: 20px;">Destination *</a></td>
    <td style="font-size: 1px; line-height: 1px;"><img style="display:block;" src="spacer100x100.gif" alt="" border="0" width="1" height="1" /></td>
    <td align="right" width="131"><table border="0" cellspacing="0" cellpadding="0" align="right">
        <tr>
          <td align="right" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-align: right; text-decoration: none;" valign="top"><a target="_blank" href="#" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-align: right; text-decoration: none; line-height: 14px;">from <span style="text-decoration: line-through;">&euro;xxx</span> n&uacute; now</a></td>
        </tr>
        <tr>
          <td align="right"><table border="0" cellpadding="0" cellspacing="0" align="right">
              <tr>
                <td align="right" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; text-align: right; text-decoration: none;" valign="top"><a target="_blank" href="#" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; text-align: right; text-decoration: none;">&euro;</a></td>
                <td width="4" style="font-size: 1px; line-height: 1px;"><img style="display:block;" src="spacer100x100.gif" alt="" border="0" width="4" height="1" /></td>
                <td align="right" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: right; text-decoration: none;"><a target="_blank" href="#" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: right; text-decoration: none;">xxx</a></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
    <td style="font-size: 1px; line-height: 1px;" width="1"><img style="display:block;" src="spacer100x100.gif" alt="" border="0" width="1" height="1" /></td>
    <td width="13"><a target="_blank" href="#" style="border: none; text-decoration: none;"><img src="icon_arrow_white.jpg" alt="" width="13" height="40" style="display:block; border: none;" border="0" /></a></td>
  </tr>
</table>
Aditza, 1 year ago

Try this - http://codepaste.net/ywstbi
First table is what you have, the other 3 are what I've done.

I don't post the entire html file, so there might be conflicts between what code you may have and what I've done.

Also when testing link the images otherwise you will have problems. Include the head css too.

And stop using 1px imgs for spacing. It is not a good practice.

bizkit29, 1 year ago

Thank you Aditza for solving this problem. The HTML you have given works fine. It is still a weird issue, but now I can research why this is happening (comparing your code with mine).

I already had the CSS in the head tag, but also thank you for that.

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