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.

enter image description here

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>

@SureshPonnukalai its the header.gif - http://jsfiddle.net/QdDQm/ — Adam G, May 28 '14 at 06:06
I checked your fiddle. I have added on 640x640 size image instead of header.gif. I didn't find any issues on those part. Check the jsfiddle http://jsfiddle.net/QdDQm/1/ — Suresh Ponnukalai, May 28 '14 at 06:18
Yeah looks good, cheers. I've never seen it, that image above is a screenshot from my client. So im finding it hard to fix :( — Adam G, May 28 '14 at 06:25
Try to collapse your `` without carriage return and white space ;-) — Patrick Ferreira, Jun 02 '14 at 14:27
It's probably because you haven't set the image with display block. But I've listed all the possibilities you should check for below. If you check everything I listed and it still doesn't work then it's going to be a typo, or some other random syntax error. — davidcondrey, Jun 02 '14 at 22:09

potashin · Accepted Answer · 2014-06-03T22:43:15.283

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.

davidcondrey · Answer 2 · 2014-06-02T22:27:19.993

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.

score 0 · Answer 3 · answered Jun 03 '14 at 12:51

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.

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

3 Answers3