Photoshop Question posted in
The official user guide can be found here.

Whitespace when viewing HTML email on Outlook.com – Photoshop

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.

Tags:

2

Answers


  1. 0

    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">

    Login or Signup to reply.
  2. 0

    Try adding line-height:0; to your p and/or span classes it solved it for me.

    span {padding:0;margin:0;line-height:0;}
    p {padding:0;margin:0;line-height:0;}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search