Outlook Not Aligning 2 Images But Other Browsers Are

I am trying to make a html email, it works in all browsers except outlook. I have created two rows on a table, with each row has an image, but there is a white space showing betwe

Solution 1:

Try this conditional CSS:

<!--[if gte mso 9]>
<styletype="text/css">table {
mso-table-lspace:0!important;
mso-table-rspace:0!important;
}
tabletd {
border-collapse:collapse !important;
border:none !important;
mso-border-alt:0!important;
}
</style>
<![endif]-->

<!--[if gte mso 15]>
<styletype="text/css">table {
font-size:1px;
mso-line-height-alt:0;
line-height:0;
mso-margin-top-alt:1px;
}
</style>
<![endif]-->

Solution 2:

Add table td { border-collapse:collapse;} to your head and declare all your tables like this:

<table border="0" cellspacing="0" cellpadding="0">

Solution 3:

Set the height of your <td>'s the same as the height of your image. In the image tag, include this: style="margin: 0; border: 0; padding: 0; display: block;"

Note that these gaps are unavoidable when someone from outlook forwards your email to someone else. I'd suggest combining your images, or better still, separating the text from the images as it will be unreadable by default in most clients.

Here is an example. This will also prevent separation in Outlook as the image is vertically sliced:

<tablewidth="600"border="0"cellpadding="0"cellspacing="0"bgcolor="3cb878"><tr><tdwidth="450"height="30"><imgalt=""src=""width="450"height="30"style="margin: 0; border: 0; padding: 0; display: block;"></td><tdwidth="150"rowspan="2"><imgalt=""src=""width="150"height="150"style="margin: 0; border: 0; padding: 0; display: block;"></td></tr><tr><tdwidth="450"height="120"style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 18px; color: #FFFFFF; padding-left:20px; font-weight:bold;">
Put your text in here...<br>...<br>...<br>...
    </td></tr></table>