Outlook not aligning 2 images but other browsers a

Question

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 between the image.

 <td colspan="2"><img style="display:block" src="images/greenTop02.gif" width="595" height="8" /></td>

Full html code : http://jsfiddle.net/eNKxp/2/

Answer 1

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:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="3cb878">
  <tr>
    <td width="450" height="30">
      <img alt="" src="" width="450" height="30" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="150" rowspan="2">
      <img alt="" src="" width="150" height="150" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="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>

Answer 2

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

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

Answer 3

Try this conditional CSS:

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

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