CODEWITHSUNDEEP
htmlemailoutlook-2010
scruffian
scruffian

Reputation: 697

One pixel space under image in HTML email in Outlook 2010

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?

Upvotes: 0

Views: 5676

Answers (7)

Anna
Anna

Reputation: 1

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;" >

Upvotes: 0

user11928116
user11928116

Reputation: 1

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

Upvotes: 0

FATMA CHEIKH
FATMA CHEIKH

Reputation: 1

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

Upvotes: 0

user4141966
user4141966

Reputation: 11

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..

Upvotes: 1

Sasafrass18
Sasafrass18

Reputation: 11

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>

Upvotes: 1

Pete Leaning
Pete Leaning

Reputation: 486

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.

Upvotes: 0

Jitender
Jitender

Reputation: 7971

Please try this and revert 

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

Upvotes: 2

Related Questions