Search code examples
htmlcssoutlookoutlook-2013

Space under images appearing in outlook 2013

I have the following email template that I have been testing using Litmus

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body style="margin: 0 !important; padding: 0 !important;">

<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
    Welcome to Solemates
</div>

<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
    <tr>
        <td style="text-align: center;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/logo.gif" alt="Hotter Solemates" /></td>
    </tr>
    <tr>
        <td style="padding: 10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="580" align="center">
                <tr>
                    <td width="182" height="320" style="border:solid 4px #A2C43F; line-height:0; text-align: center; vertical-align: top;" valign="top">
                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/left.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                    </td>
                    <td width="200" height="320" style="padding: 0 3px;">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                            <tr>
                                <td style="border:solid 4px #A2C43F; height: 320px; padding: 0 10px; text-align:center;" height="320">
                                    <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 10px 0; font-family: Helvetica, Arial, sans-serif;">Dear [name],</p>
                                    <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Your Hotter Solemates membership number is</p>
                                    <p style="color: #A2C43F; font-size: 14px; line-height: 18px; margin: 0 0 10px 0; font-weight: 600; font-family: Helvetica, Arial, sans-serif;">[member_id]</p>
                                    <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Return to Hotter Solemates and log in to regain access to the early previews, exclusive offers, and exciting promotions available on the Hotter Solemates hub</p>
                                    <p style="margin: 0 0 5px 0;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/return.jpg" alt="Return to Solemates" /></a></p>
                                    <p style="margin:0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/heart.jpg" alt="" /></p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="182" height="320" style="border:solid 4px #A2C43F; line-height:0; text-align: center; vertical-align: top;" valign="top">
                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/right.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="text-align: center; padding: 20px 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/explore-now.jpg" alt="Explore Now" /></td>
    </tr>
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
                <tr>
                    <td style="text-align: center;">
                        <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/chance-to-win.jpg" alt="" /></a>
                    </td>
                    <td style="text-align: center;">
                        <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/mates.jpg" alt="" /></a>
                    </td>
                    <td style="text-align: center;">
                        <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/secrets.jpg" alt="" /></a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="line-height: 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/footer.jpg" alt="" /></td>
    </tr>
    <tr>
        <td>
            <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                <tr>
                    <td style="text-align: right;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/facebook.jpg" alt="Facebook" /></a></td>
                    <td style="text-align: center;" width="70"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/twitter.jpg" alt="Twitter" /></a></td>
                    <td style="text-align: left;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/instagram.jpg" alt="Instagram" /></a></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                <tr>
                    <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                        <strong>UNSUBSCRIBE</strong><br />
                        if you want to snooze your subscription, or no longer wish to receive emails from Hotter then [unsubscribe]update your preferences[/unsubscribe].
                    </td>
                    <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                        <strong>EMAIL DELIVERY</strong><br />
                        We never send unsolicited emails. To receive all of our emails add [email protected] to your contacts.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>

For some reason I am getting some spacing appearing in Outlook 2013 below the large images in the left and right columns. Why is this appearing?

Outlook 2013 screenshot

Solution

  • you had a few different things going on here that was making the email render incorrectly.

    Firstly - remove line-height:0; from the td surrounding your images.

    Secondly - I have also nested the 2 images boxes in another table so they are sitting at the same level as the centre box, this fixes an issue you had with the border being applied in the wrong place.

    Problem solved :)

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body style="margin: 0 !important; padding: 0 !important;">

    <!-- HIDDEN PREHEADER TEXT -->
    <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
        Welcome to Solemates
    </div>

    <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
        <tr>
            <td style="text-align: center;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/logo.gif" alt="Hotter Solemates" /></td>
        </tr>
        <tr>
            <td style="padding: 10px;">
                <table border="0" cellpadding="0" cellspacing="0" width="580" align="center">
                    <tr>
                        <td>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td width="182" height="320" style="border:solid 4px #A2C43F; vertical-align: top;" valign="top">
                                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/left.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <td width="200" height="320" style="padding: 0 3px;">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td style="border:solid 4px #A2C43F;height: 320px; padding: 0 10px; text-align:center;" height="320">
                                        <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 10px 0; font-family: Helvetica, Arial, sans-serif;">Dear [name],</p>
                                        <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Your Hotter Solemates membership number is</p>
                                        <p style="color: #A2C43F; font-size: 14px; line-height: 18px; margin: 0 0 10px 0; font-weight: 600; font-family: Helvetica, Arial, sans-serif;">[member_id]</p>
                                        <p style="color: #595959; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; font-family: Helvetica, Arial, sans-serif;">Return to Hotter Solemates and log in to regain access to the early previews, exclusive offers, and exciting promotions available on the Hotter Solemates hub</p>
                                        <p style="margin: 0 0 5px 0;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/return.jpg" alt="Return to Solemates" /></a></p>
                                        <p style="margin:0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/heart.jpg" alt="" /></p>
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <td>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                                <tr>
                                    <td width="182" height="320" style="border:solid 4px #A2C43F; vertical-align: top;" valign="top">
                                        <img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/right.jpg" alt="Shoe" width="182" height="320" style="display: block; padding:0; margin:0;" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; padding: 20px 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/explore-now.jpg" alt="Explore Now" /></td>
        </tr>
        <tr>
            <td>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="margin-top: 10px; font-family: Helvetica, Arial, sans-serif;">
                    <tr>
                        <td style="text-align: center;">
                            <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/chance-to-win.jpg" alt="" /></a>
                        </td>
                        <td style="text-align: center;">
                            <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/mates.jpg" alt="" /></a>
                        </td>
                        <td style="text-align: center;">
                            <a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/secrets.jpg" alt="" /></a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="line-height: 0;"><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/footer.jpg" alt="" /></td>
        </tr>
        <tr>
            <td>
                <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                    <tr>
                        <td style="text-align: right;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/facebook.jpg" alt="Facebook" /></a></td>
                        <td style="text-align: center;" width="70"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/twitter.jpg" alt="Twitter" /></a></td>
                        <td style="text-align: left;"><a href=""><img src="http://www.hotter.com/blog/wp-content/uploads/2017/03/instagram.jpg" alt="Instagram" /></a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table bgcolor="#99c412" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="font-family: Helvetica, Arial, sans-serif; background-color: #99c412;">
                    <tr>
                        <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                            <strong>UNSUBSCRIBE</strong><br />
                            if you want to snooze your subscription, or no longer wish to receive emails from Hotter then [unsubscribe]update your preferences[/unsubscribe].
                        </td>
                        <td style="color: #fff; font-size: 12px; text-align: center; padding: 20px 0; vertical-align: top;" width="50%" valign="top">
                            <strong>EMAIL DELIVERY</strong><br />
                            We never send unsolicited emails. To receive all of our emails add [email protected] to your contacts.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>
</html>