htmlemailoutlookemail-client
HTML email with linked images breaks in Outlook
I have created a simple html email with images with the following code:
<html>
<head>
</head>
<body style="background-color:#FFFFFF">
<div style="width: 720px; margin: 0pt auto; overflow:hidden; font-size:0; line-height:0;">
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0401_3.jpg" height="176" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0402_3.jpg" height="50" border="0" width="478"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline; border:0;" src="http://img.emailnewsletter-software.net/n869_likeButton1_3.jpg" height="50" border="0" width="165"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0404_3.jpg" height="50" border="0" width="77"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0405_3.jpg" height="238" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0406_3.jpg" height="13" border="0" width="272"><a href="http://www.antwerpjewels.co.uk" target="_blank"><img style="display:inline; border:0;" src="http://img.emailnewsletter-software.net/n869_siteLink1_3.jpg" height="13" border="0" width="176"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0408_3.jpg" height="13" border="0" width="272"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0409_3.jpg" height="112" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0410_3.jpg" height="27" border="0" width="503"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_likeButton2_3.jpg" height="27" border="0" width="52"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0412_3.jpg" height="27" border="0" width="165"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0413_3.jpg" height="133" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0414_3.jpg" height="27" border="0" width="503"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_likeButton3_3.jpg" height="27" border="0" width="52"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0416_3.jpg" height="27" border="0" width="165"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0417_3.jpg" height="131" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0418_3.jpg" height="17" border="0" width="356"><a href="http://www.antwerpjewels.co.uk" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_siteLink2_3.jpg" height="17" border="0" width="162"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0420_3.jpg" height="17" border="0" width="202"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0421_3.jpg" height="36" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0422_3.jpg" height="48" border="0" width="282"><a href="http://www.facebook.com/pages/Antwerp-Jewels/176579572442840" target="_blank"><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_likeButton4_3.jpg" height="48" border="0" width="157"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0424_3.jpg" height="48" border="0" width="281"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0425_3.jpg" height="55" border="0" width="720"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0426_3.jpg" height="15" border="0" width="256"><a href="http://www.antwerpjewels.co.uk" target="_blank"><img style="display:inline;" src="http://img.emailnewsletter-software.net/n869_siteLink3_3.jpg" height="15" border="0" width="159"></a><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0428_3.jpg" height="15" border="0" width="305"></div>
<div><img style="display:inline" src="http://img.emailnewsletter-software.net/n869_0429_3.jpg" height="42" border="0" width="720"></div>
</div>
</body>
</html>
This is showing properly in all the email clients that I tested it in but Outlook! All the linked images show irregular whitespace around them like shown in the image below.
Please Help!
Solution
It could be the Div's that are causing the issue. Outlook treats DIVs differently than a browser, usually giving them double line-spacing. Try using a SPAN instead.