CODEWITHSUNDEEP
htmlemailhtml-email
brando
brando

Reputation: 161

Outlook 2007+ spacing issue

I want to hide a row from Outlook 2007+ and replace it with a conditional row.

For some reason, the conditional row renders incorrectly with excess spacing (possibly padding or margin).

What's odd is if I take the code from the conditional row and use it to replace the original row, it renders correctly. It's only when I call it in conditionally that it gets messed up.

Here's my code. Any ideas?

<!--[if (gte mso 9)|(IE)]>
<tr>
    <td>
        <table width="100" cellspacing="0" cellpadding="0">
            <tr>
                <td class="text caT" valign="bottom" style="font-size: 18px;font-weight: bold;Margin:0;line-height:14px;color: #17a0ce; vertical-align: bottom;">
                    <img style="vertical-align: bottom;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="B" />
                </td>
                <td valign="middle" style="font-size: 18px;font-weight: bold;Margin:0;line-height:14px;color: #17a0ce; vertical-align: middle;">Alone</td>
            </tr>
        </table> 
    </td>
</tr>
<![endif]-->
<tr>
    <td class="text" valign="middle" style="font-size: 18px;font-weight: bold;Margin:0;line-height:14px;color: #f49ac1; vertical-align: middle;mso-hide: all">
        <img style="vertical-align: middle;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="B" /> Back
    </td>
</tr>

Upvotes: 0

Views: 42

Answers (1)

Ted Goas
Ted Goas

Reputation: 7577

Adding mso-height-rule: exactly; just before each line-height declaration will enforce said line-height in Outlook.

Adding a display: block; to each image will eliminate extra space below images in Outlook.

<td class="text caT" valign="bottom" style="font-size: 18px;font-weight: bold;Margin:0; mso-height-rule: exactly; line-height:14px;color: #17a0ce; vertical-align: bottom;">
    <img style="vertical-align: bottom;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" style="display: block;" alt="B" />
</td>
<td valign="middle" style="font-size: 18px;font-weight: bold;Margin:0; mso-height-rule: exactly; line-height:14px;color: #17a0ce; vertical-align: middle;">
    Alone
</td>

Upvotes: 2

Related Questions