Geek Answers Handbook

Gap added in Gmail inside html signature from Outlook

I created an html signature that I need to use in Outlook. Following the recommendations, I used the table layout, taking into account all the images and even td's, tr, as well as the table height and width of the table, 0 additions and fields, and even tried to add them both in CSS and in the old style to the current tags.
In Outlook, this comes out correctly, but in gmail it adds a gap between tr. Following the recommendations here: Gmail, displaying spaces between images , I tried to add style = "display: block;" to the images, still no luck. Here is the code I'm using:

<table cellspacing="0px" cellpadding="0px" border="0px" width="592px" height="254px" style="border-collapse:collapse; border:none; padding:0px; margin:0px; width:592px; height:254px;"> <tr cellspacing="0px" cellpadding="0px" width="592px" height="90px" style="padding:0px; margin:0px; width:592px; height:90px;"> <td cellspacing="0px" cellpadding="0px" width="83px" height="90px" style="padding:0px; margin:0px; width:83px; height:90px;">&nbsp;</td> <td cellspacing="0px" cellpadding="0px" width="150px" height="90px" style="padding:0px; margin:0px; width:150px; height:90px;"><img src="new_sig.files/sig2.png" width="150px" height="90px"></td> <td cellspacing="0px" cellpadding="0px" width="359px" height="90px" style="padding:0px; margin:0px; width:359px; height:90px;"><img src="new_sig.files/sig3.png" width="359px" height="90px"></td> </tr> <tr cellspacing="0px" cellpadding="0px" width="592px" height="64px" style="padding:0px; margin:0px; width:592px; height:64px;"> <td cellspacing="0px" cellpadding="0px" width="83px" height="64px" style="padding:0px; margin:0px; width:83px; height:64px;"><a href="http://www.facebook.com"><img style="border:none;" src="new_sig.files/sig4.png" width="83px" height="64px"></a></td> <td cellspacing="0px" cellpadding="0px" width="150px" height="64px" style="padding:0px; margin:0px; width:150px; height:64px;"><img src="new_sig.files/sig5.png" width="150px" height="64px"></td> <td cellspacing="0px" cellpadding="0px" width="359px" height="64px" style="padding:0px; margin:0px; width:359px; height:64px;"><img src="new_sig.files/sig6.png" width="359px" height="64px"></td> </tr> <tr cellspacing="0px" cellpadding="0px" width="592px" height="100px" style="padding:0px; margin:0px; width:592px; height:100px;"> <td cellspacing="0px" cellpadding="0px" width="83px" height="100px" style="padding:0px; margin:0px; width:83px; height:100px;"><img src="new_sig.files/sig7.png" width="83px" height="100px"></td> <td cellspacing="0px" cellpadding="0px" width="150px" height="100px" style="padding:0px; margin:0px; width:150px; height:100px;"><img src="new_sig.files/sig8.png" width="150px" height="100px"></td> <td cellspacing="0px" style="padding:0px 5px 0px 15px; margin:0px; width:339px; height:100px;line-height:16px; font-size:12px;color:#4f4f4f;font-family:arial;" > Name LastName<br/> Description<br/><br/> <a href="http://www.site.com" style="color:#0875a4;">www.site.com</a> <img src="new_sig.files/phone_icon.png" width="18px" height="28px"/> 972-(0)3-6960556 <img src="new_sig.files/mail_icon.png" width="18px" height="28px"/> <a href="mailto: name@site.com " style="color:#0875a4;"> name@site.com </a> </td> </tr> </table>

Now the gmail code seems to be as follows:

 <table width="592" cellspacing="0" cellpadding="0" border="0" style="width: 444pt; border-collapse: collapse;"> <tbody> <tr style="min-height: 67.5pt;"> <td width="83" style="width: 62.25pt; padding: 0in; min-height: 67.5pt;"> <p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">&nbsp;</span></p> </td> <td width="150" style="width: 112.5pt; padding: 0in; min-height: 67.5pt;"> <p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"> <img height="90" width="150" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td> <td width="359" style="width: 269.25pt; padding: 0in; min-height: 67.5pt;"> <p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"> <img height="90" width="359" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td></tr> <tr style="min-height: 48pt;"> <td width="83" style="width: 62.25pt; padding: 0in; min-height: 48pt;"> <p class="MsoNormal"><a target="_blank" href="http://www.facebook.com/"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;; color: blue; text-decoration: none;"> <img height="64" width="83" border="0" src=""></span></a><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td><td width="150" style="width: 112.5pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"> <img height="64" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td> <td width="359" style="width: 269.25pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"> <img height="64" width="359" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td></tr> <tr style="min-height: 75pt;"> <td width="83" style="width: 62.25pt; padding: 0in; min-height: 75pt;"> <p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"> <img height="100" width="83" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td> <td width="150" style="width: 112.5pt; padding: 0in; min-height: 75pt;"> <p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"> <img height="100" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td> <td width="339" style="width: 254.25pt; padding: 0in 3.75pt 0in 11.25pt; min-height: 75pt;"> <p style="line-height: 12pt;" class="MsoNormal"><span style="font-size: 9pt; color: rgb(79, 79, 79);">Name LastName<br>Description<br><br><a target="_blank" href="http://www.site.com"> <span style="color: rgb(8, 117, 164);">www.site.com</span></a> </span> <span style="font-size: 9pt; color: rgb(79, 79, 79);"> <img height="28" width="18" border="0" src=""></span> <span style="font-size: 9pt; color: rgb(79, 79, 79);">972-(0)3-6960556 </span> <span style="font-size: 9pt; color: rgb(79, 79, 79);"> <img height="28" width="18" border="0" src=""></span> <span style="font-size: 9pt; color: rgb(79, 79, 79);"> <a target="_blank" href="mailto: name@site.com "> <span style="color: rgb(8, 117, 164);"> name@site.com </span></a> </span></p></td></tr> </tbody></table>

I also tried giving the whole table a row height of 0, but that didn't work either.
2 images in the last cell, by the way, are not displayed in gmail for any reason.

update: didn’t really notice that so far more answers have been received. we simplified the design / code a bit and after a while I stopped checking this page. not sure if any of the solutions here would work, but I see that they helped other people. thnx anyway :)

+4
source share
5 answers

For table cells containing only an image, set the line height to 0

 <td style="line-height:0"><img ... /></td>

(Email On Acid was good advice.)

+13
source

Well, I could not replicate the problem by sending an email to my Gmail account, but I saw a problem while validating HTML in Opera browser.

Try adding vertical-align: middle; to the problematic <TD> . He did the trick for Opera.

This, of course, without seeing the images, but vertical alignment should not slow down.

You can also check this tool: http://www.emailonacid.com/

The free version allows you to check AOL Web, Gmail and Outlook 2003.

0
source

Try putting this in the head:

 <style type="text/css"> <!-- p.MsoNormal { margin: 0px !important; } --> </style>

It should override a style that is unwanted in Gmail.

0
source

You mentioned that you tried to add style = "display: block" to your images, but I don't see this in your code. A few things fixed these situations for me in Gmail:

  • Add border = "0" and style = "display: block" to each element
  • When specifying the width and height in the attributes (and not in the "style" attribute) do not include "px", just a number

So, if you make sure that all of your images are in the following format, it should remove these spaces (if they are not placed there with incorrect height values).

 <img alt="something" src="http://somewhere.com/image.png" width="35" height="35" border="0" style="display:block;" />
0
source

The solution worked for me, I summarize each solution proposed here

did something like:

  <td rowspan="2" style="line-height:0"> <img src="images/myimage.jpg" width="426" height="183" alt=""border="0" style="display:block;" /> </td>

and it worked for me ...

0
source

More articles:


All Articles