CODEWITHSUNDEEP
outlookhtml-emailoutlook-2013
facot
facot

Reputation: 221

HTML MAIL - 1px vertical space between images in outlook 2013

It looks fine in gmail, hotmail vb but I couldn't solve the space problem in outlook. it only shows 1px whitespace between the images and only vertically. Any help will be appreciated, thanks.

Here is my code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
</head>
<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td>
                <table border="0" cellspacing="0" cellpadding="0" style="width: 700px; border-spacing: 0px; font-family: Arial; margin: 0 auto; display: block; border-collapse: collapse">
                    <tr>
                        <td>
                            <img src="1.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="2.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="3.jpg" alt="mail" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="4.jpg" alt="mail" />
                        </td>
                        <td>
                            <a href="#">
                                <img src="5.jpg" alt="mail" /></a>
                        </td>
                        <td>
                            <img src="6.jpg" alt="mail" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="7.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="8.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="9.jpg" alt="mail" />
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</body>
</html>

Upvotes: 1

Views: 6523

Answers (2)

Darryl Vos
Darryl Vos

Reputation: 339

I've come across this problem a number of times. Simple fix though. Apply a font-size and line-height on the tds holding the image. It will remove the space. Use a font-size and line-height that is smaller than your image heights.

Also the display:block is very important. Definitely need that.

Upvotes: 2

jsuissa
jsuissa

Reputation: 1762

I would first trying adding display: block; to the images as an inline style and for the tables add border-collapse: collapse; also as an inline style.

If that doesn't resolve the spaces there are some techniques that apply specifically to Outlook that you should try next. There's a very in-depth article on fixing extra space issues with Outlook tables on Email on Acid.

You may also want to try using even more nested tables inside the td tags.

Upvotes: 5

Related Questions