Adding extra p and span tag for html emailing

Question

My html email layout as below;

enter image description here

HTML

<html>
<head>
<title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" height="100%" align="center">
    <tr>
    <td align="center" valign="middle">
        <table width="602" height="556" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="line-height:0; font-size:0px;" colspan="5">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_01.jpg" alt="" height="91" style="display:block; border:none; line-height:0;" width="602" >
                    </a>
                </td>
            </tr>
            <tr>
                <td style="line-height:0; font-size:0px;" colspan="5">
                    <img src="images/img_02.jpg" alt="" height="360" style="display:block; border:none; line-height:0;" width="602" >
                </td>
            </tr>
            <tr>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_03.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="118" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_04.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="96" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <img src="images/img_05.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="194" >
                </td>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_06.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="110" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <img src="images/img_07.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="84" >
                </td>
            </tr>
            <tr>
                <td style="line-height:0; font-size:0px;" colspan="3">
                    <img src="images/img_08.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="408" >
                </td>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_09.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="110" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <img src="images/img_10.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="84" >
                </td>
            </tr>
        </table>
        </td>
</tr>
</table>

</body>
</html>

Above code work fine for gmail, outlook 2007, outlook.com. But if I forward this mail from outlook 2007 to outlook.com, email break as like this;

enter image description here

Outlook adding extra p and span tag to anchor tag for image and gives them style. So my layout, break as above image.

Original Code;

<td style="line-height:0; font-size:0px;" colspan="5">
    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
        <img src="imagepath" alt="" height="91" style="display:block; border:none; line-height:0;" width="602" >
    </a>
</td>

Styled Code (after forwarding mail);

<td colspan="5" style="padding:0cm 0cm 0cm 0cm;">
    <p class="ecxMsoNormal" style="line-height:0%;">
        <a href="http://www.google.com/" target="_blank" class="">
            <span style="font-size:1.0pt;color:blue;text-decoration:none;">
                <img border="0" width="602" height="91" id="ecx_x0000_i1034" src="imagepath" class="">
            </span>
        </a>
        <span style="font-size:1.0pt;"></span>
    </p>
</td>

JsFiddle

http://jsfiddle.net/zc7nL/

How can I solve this issue?

score 0 · Answer 1 · answered Mar 28 '14 at 21:11

Unfortunately there is no way to prevent Outlook adding the <p> tags, we just have to find ways to zero them out. Try adding margin: 0; padding: 0; inline to all your image tags and add #outlook a {padding:0;} to your header style tag. Also removing the space between your anchor and image tags may possibly stop the spans from appearing. Not 100% sure, but worth a try.

If none of that works, try targeting .ecxMsoNormal in your style tag as you would for the web. Any styles you apply there should take affect as Outlook reads it (unlike Gmail).

Adding extra p and span tag for html emailing

1 Answers1