Vertical 1px on image in windows outlook 07' 10' html email

Question

I have a Vertical white 1px on my image in windows outlook 2007 & 2010 for my HTML email. I don't know why this is happening. This only happens in windows outlook so far from what i've seen. And not any other client.

Heres a photo

<tr>
    <td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
        <img editable label='header image' src="images/header.gif" class="header" width="640">
    </td>
</tr>

Answer 1

I came across two possible reasons for this behavior of borders in Outlook while googling :

• Outlook adds 1px border to the table cell elements. You can get rid of it by using border-collapse : collapse CSS property to your table cells and cellpadding="0" and cellspacing="0" attributes to the table element. The strange thing that this border appears to be only on the right side of the td, but it can be so due to <img> layout. If you want to look for more information about this issue you can follow this link.

• If you are setting somewhere in CSS classes your border to something like border: 0px style color (or not setting at all) (the main part here is setting border-width to 0px) it will be ignored by Outlook, so you can make it to not display border at all by setting border-style : none. I guess this is closer to your problem, as I've found a similar sample picture here.

Answer 2

This extra space could be caused by numerous things:

• the image is incorrectly sized and is smaller than its container
• if you are scaling the image to a size other than its original size Outlook will likely ignore these attributes and continue displaying it at the original size.
• if your attempting to use margin or padding properties
• if you are not collapsing your cells with table td { border-collapse:collapse } and table cellpadding="0" cellspacing="0"
• if you are not making the image display:block
• if you mistakenly overlooked stray while space within the actual image (improper slicing)
• if, somewhere above or below this cell, you have content causing the table or cell width to be stretched further than it should.

Also, just from the code sample you posted.. You should remove the bgcolor from your cell and you should also remove the width from the img but leave it on the cell.

Answer 3

Updated Fiddle

Usually when I have this type of issues I wrap my td with a table. Below there is a part of your markup at the point where you have the image.

    <td>
       <table width="640" border="0" style="width:640px;border-collapse:collapse;padding:0;margin:0;">
           <tr>
             <td>
               <img editable label='header image' src="http://t0.gstatic.com/images?q=tbn:ANd9GcTDhTODtu4yyVkbK7GUbFKctbR8Rgry7BRXnaC9Ztgls1vEVqsV" class="header" width="640" >
              </td>
           </tr>
      </table>
</td>

This will fix your problem.