I'm building a html email, by splicing an approved design in Photoshop and coding it by hand after. The email looks great in both Outlook and Gmail, but not in outlook.com.
I've tried:
Styling the p.mso classes in style tags Nesting my images in divs and setting them to the image's height. line-height:50%; on everything. (took this off and the other two email clients renders fine) making the td tags the same height as the images.
Nothing is working, I'm getting padding bottom on all my images, ruining the layout.
The HTML is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>this is placeholder</title>
</head>
<body bgcolor="#eee" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0; top:0;">
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
p.ecxMsoNormal, .ecxMsoNormal { line-height:0px; margin:0px; padding: 0px; display: none; }
</style>
<center>
<table id="Table_01" style="display:block; background-color: #fff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600" border="0" cellpadding="0" cellspacing="0" col="3">
<tr>
<td valign="top" align="left" width="600" colspan="3" style="padding: 0px; margin: 0px; line-height: 50%;">
<img src="images/email_01.png" alt="" width="600"/>
</td>
</tr>
<tr>
<td valign="top" align="left" width="29" colspan="1" style="padding: 0px; margin: 0px; line-height: 50%;">
<img src="images/email_02.png" alt="" width="29"/>
</td>
<td valign="top" align="left" width="542" colspan="1" style="background-color: #f3f3f4; padding: 0px; margin: 0px; line-height: 50%;" height="172">
<img src="images/email_03.png" alt="" align="right" width="133" height="172"/>
<p style="font-family: 'Arial', 'Helvetica', sans-serif; text-align:left; font-size:14px; line-height:21px; background-color:#f3f3f4; color: #6d6e71;padding: 0px; margin: 0px; width: 409px; height:172px;">
We are delighted to attach the inaugural <span style="color: #004281; font-weight:bold; font-size:16px;">this is placeholder</span><br/>this is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholderthis is placeholder
<br/><br/>
<span style="color: #f6861f; font-weight:bold; font-size: 18px;">this is placeholder</span>
</p>
</td>
<td valign="top" align="left" width="29" colspan="1" style="padding: 0px; margin: 0px; line-height: 50%;">
<img src="images/email_04.png" alt="" width="29"/>
</td>
</tr>
<tr>
<td valign="top" align="left" width="600" colspan="3" style="padding: 0px; margin: 0px; line-height: 50%;">
<img src="images/email_05.png" alt="" width="600"/>
</td>
</tr>
</table>
</body>
</html>
Does anyone know a fix? I'm getting tired of trawling the internet for one. Thanks.
Try adding
style="display:block;"to the image tags.It might also have to do with the
line-height:50%;you have on the TDs, since Outlook.com has pretty terrible line-height rules.http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com
^ They leave this out, but for the line-height fix to work you have to wrap your content in
<div class="ExternalClass">