0

I know this is the kind of question that gets asked all the time, but I have been through every answer I can find and nothing solves this. The problem is that outlook 2010 adds a one pixel gap under (or over) every image inside a table cell. (Whether it is below or above depends on whether you us valign="top" or valign="bottom"). Setting display: block; doesn't seem to help.

If you take a look at this example in Outlook 2010 on Windows 7 you will see a red line under the Google logo. Nothing I have done will remove this line.

<table width="275" height="95" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bgcolor="red">
    <tr>
        <td width="275" height="95" align="left" valign="bottom" style="font-size:0; line-height: 0; border-collapse: collapse;">
            <img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" style="display: block; vertical-align: top;"></td>
    </tr>
</table>

I am coming to the conclusion that is not possible to remove the line. Any one care to prove me wrong?

scruffian
  • 697
  • 6
  • 7
  • This questions has been asked and answered really well here: http://stackoverflow.com/questions/6520731/inconsistent-spaces-below-td-elements-in-tables-in-html-email-in-outlook-2007-a?rq=1 – Emily M Vose Aug 23 '12 at 12:45
  • I have already tried everything suggested there. The valign technique is useful if you have two images stacked one on top of the other as you can make the upper one align to the bottom, and the lower one align to the top, so they seem to be next to each other, but when you have 3 on top of each other that won't work. – scruffian Aug 23 '12 at 13:08

7 Answers7

2

Please try this and revert 

<img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" style="display: block;" align="top">
Jitender
  • 7,593
  • 30
  • 104
  • 210
1

Try this - see!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="275" height="95" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bgcolor="red;">
<tr>
<td width="275" height="95" align="left" valign="bottom" style="font-size:0; line-height: 0; border-collapse: collapse;"><img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" style="display: block; vertical-align: top;"></td>
</tr>
</table>

</body>
</html>
Sasafrass18
  • 11
  • 1
1

even I had the same issue but I solved the problem by inserting image within div , p tag and overriding the external css which is generated by the mail client.

<td colspan="3">
        <div class="override" style="height: 201px !important;">
        <p style="height: 201px !important; ">
            <img src="images/path" width="800" height="201" alt="">
        </p>
        </div>
</td>

<style type="text/css">
p {margin-bottom: 0;}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
line-height: 0%;
}
p, .override{
font-size:0pt ;
line-height:0px;
}
</style>

Hope this will help anybody.All the best..

user4141966
  • 11
  • 1
0

Hey I know this is an old thread but I just had this problem and actually managed to work around it in a weird way. In my case I had a 1 pixel gap appearing below my image. I removed the image from the table structure and then set the html height to be one pixel less than the images' actual height. Below is the exact code (image src redacted) I used in my email.

</table>

    <img src='http://img1.jpg' height='400' width='552' alt='' border='0' style='display:block;align:bottom;border:none;margin:0;padding:0;height:401px;' />

<table border='0' style='padding:0;margin:0;border-collapse:collapse;' cellpadding="0" cellspacing="0">

Somehow this fixed it. I'm not sure if actually removing the image from the table structure was necessary.

Pete Leaning
  • 486
  • 2
  • 15
0

one trick thar worked for me: add align="absbottom texttop " to the img and line-height:10px (or less) to the td that wraps the image

FATMA CHEIKH
  • 1
  • 1
0

Remove the align="left" (or "right").

cs95
  • 379,657
  • 97
  • 704
  • 746
user11928116
  • 1
0

Add align="left" to image tag itself like this:

<img src="https://www.google.co.uk/images/srpr/logo3w.png" border="0" align="left" style="display: block; vertical-align: top;" >
Anna
  • 1