0

I have a problem with the email signature I am designing. I have used only HTML code as I will have a couple of links in my signature. The problem is that, in the part where the logo is placed, it appears a white line in the bottom part (I marked it in yellow so you can see it, but it was actually white). Actually, I don't know if that's a white line or is just the background of the email interface.

I've erased my personal info for privacy:

email signature

When I exported the logo from Illustrator as a JPG file, I uploaded it to imgur.com to include it in my HTML Code. I am sure that that white line is not in my jpg file, so it's supposed to be created when I upload it to imgur, or maybe it's a code problem. 

<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
    <tr>
        <td valign="top" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0px; border-top: 0; border-bottom: 0: border-left: 0; "><img id="preview-image-url" src="https://i.imgur.com/3yGlrjw.png"></td>

        <td style="padding-top: 0; padding-bottom: 0; padding-left:0px; padding-right: 0;  background-color:  #f9f9f9">
            
        <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding-top: 10px !important; padding-left: 50px; padding-right: 60px; padding-bottom: 10px !important">

            <tr><td colspan="2" style="padding-bottom: 1px; color: #ce173a; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">Abcdef Ghijk Lmnop</td></tr>
            <tr><td colspan="2" style="padding-bottom: 10px; color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;">Graphic Designer & Art Director</td></tr>

            <tr><td width="20" valign="top" style=" padding-top: 9px; vertical-align: top; width: 20px; color: #000000; font-size: 8px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #000;">T.</td><td valign="top" style=" padding-top: 9px; vertical-align: top; color: #333333; font-size: 8px; font-family: Arial, Helvetica, sans-serif;"><a  style=" color: #333333; text-decoration: none; font-weight: normal; font-size: 8px;">+34 636 63 63 63</a>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold; padding-right: 30px; padding-left: 42px; color: #000;"></td></tr>

            <tr><td width="20" valign="top" style=" padding-top: 9px; vertical-align: top; width: 20px; color: #000000; font-size: 8px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #000;">E.</td><td valign="top" style=" padding-top: 9px; vertical-align: top; color: #333333; font-size: 8px; font-family: Arial, Helvetica, sans-serif;"><a href="mailto:my.email@gmail.com" style=" color: #333333; text-decoration: none; font-weight: normal; font-size: 8px;">my.email@gmail.com</a>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold; padding-right: 30px; padding-left: 42px; color: #000;"></td></tr>


            <tr><td width="20" valign="top" style="padding-top: 9px; vertical-align: top; width: 20px; color: #000000; font-size: 8px; font-family: Arial, Helvetica, sans-serif; padding-right:30px; font-weight: bold; color: #000">W.</td><td style="color: #333333; padding-top: 9px; font-size: 8px; font-family: Arial, Helvetica, sans-serif;"><a href="https://behance.net/Mybehance" style="text-decoration: none; color: #333333;">behance.net/MyBehance</a></td></tr>
                
        </table>

        </td>
    </tr>
</table>

Can you help me deleting that line, so the logo height is the same as the background of the right part where the text is?

Thanks a lot!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Pablo G.
  • 55
  • 1
  • 12
  • I've solved it! When I realized the problem only occurred when pasting my signature into the Gmail settings signature field. So I could search on Google more precisely, and finally the solution was just adding style="display: block" to the img tag, and that white line disappeared. – Pablo G. Jul 10 '19 at 22:44

1 Answers1

0

To see if it's the background color acting as the white bar, temporarily change the background color to see if it changes the color of the white bar. If it does then that means it's not a white bar it's the background and the height of your image needs to be adjusted. However, if the white bar remains then try setting the margin and padding of the img to 0.

img {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
Stankeneddy774
  • 101
  • 7
  • Alright, I've just checked it and the problem only appears when I paste the signature on the Gmail settings signature field. I am doing it by selecting the signature with CMD+A in the browser, and pasting it in the Gmail settings signature field, and when pasted, that line appears. So the problem is when pasting the signature into Gmail. Any idea of how to solve this? – Pablo G. Jul 10 '19 at 22:41
  • When you do CMD+A it selects everything, including the margin or padding. So you need to only select the image and not the margin and padding included on the image. In my opinion, I wouldn't host your image on imgur. I would make your website on a localhost:80 or whatever port number you want (Not necessary but I would recommend it) and then using the 'src' attribute on the img element to load up your image that you put inside of your website's folder. – Stankeneddy774 Jul 10 '19 at 22:50