0

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.

enter image description here

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

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
al123
  • 561
  • 9
  • 25

3 Answers3

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>
John
  • 11,985
  • 3
  • 45
  • 60
  • iv added the border margin padding and display for each image, still its showing that white space on hotmail.... arraghh – al123 Jan 09 '14 at 16:42
  • Maybe the colspan is messing it up. Try nesting both rows into a table. Here is something [you should be mindful of](http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122) when working with colspans in Outlook. – John Jan 09 '14 at 16:53
1

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

<table border="0" cellspacing="0" cellpadding="0">
davidcondrey
  • 34,416
  • 17
  • 114
  • 136
1

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]-->
Jazper Adèr
  • 77
  • 6