Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Images pushed down by text in Outlook 2010

X1Discovery

Newbie
Total Posts:  2
Posted: 11 June 2012 04:55 PM

I banged my head against this error, where the image ends up getting pushed down by the text, but only in Outlook 2010 when the text and the image occur in the same cell.  Seems silly, but reversing the order of the image and text seems to solve the problem.  I hope this doesn’t cause any problems in other email clients.  Here’s a sample that demonstrates the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html>
    <
head>
        <
title>Test of Outlook 2010 Images</title>
        <
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <
style type="text/css">
            .
ReadMsgBody {width100%;}
            
.ExternalClass{display:block !important;}
        
</style>
    </
head>
    <
body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bgcolor="#FFFFFF" >
        <
div>
            <
div class="mktEditable"><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#F2F2F9">
                <
tbody>
                    <
tr>
                        <
td width="560" valign="top">
                            <
font color="#000000" face="Arial, Helvetica, sans-serif" style="line-height:30px;font-size:20px;"><strong>Test of Outlook 2010 Vertical Spacing</strong></font>
                            <
img align="right" src="http://info.x1.com/rs/x1/images/x1_cloud.gif" width="140" height="49" border="0" style="margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;">
                        </
td>
                    </
tr>
                    <
tr>
                        <
td valign="top">
                            <
img align="right" src="http://info.x1.com/rs/x1/images/x1_cloud.gif" width="140" height="49" border="0" style="margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;">
                            <
font color="#000000" face="Arial, Helvetica, sans-serif" style="line-height:30px;font-size:20px;"><strong>Test of Outlook 2010 Vertical Spacing</strong></font>
                        </
td>
                    </
tr>
                </
tbody>
            </
table>
            </
div>
        </
div>
    </
body>
</
html