?
Solved

Email signature not rendering correctly in Gmail and Hotmail

Posted on 2008-06-14
8
Medium Priority
?
630 Views
Last Modified: 2013-11-19
Hi everyone,

I have an email signature (see code below) that works fine in desktop email clients but I've noticed that Gmail and Hotmail are adding extra space at the top of the two td cells that contain the address and phone numbers and also extra space at the bottom of the cell that contains the image. I've used inline css to remove all margins from the td elements but it hasn't helped.

I wondered if someone could tell me if there's any fix for this so these two email clients will render it correctly.

Appreciate any help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Unititled</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff" style="margin: 0; padding: 0;">
<!-- Start Table -->
<table width="330" height="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: 0;">
<tr>
<!-- Start Content -->
<td colspan="2" align="left" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;  color:#000; padding: 0; margin: 0;"><p style="margin: 0; padding: 0;">Yours sincerely,<br /><br />
  <span style="font-weight:bold">Firstname Lastname</span>
  </p>
  <br /></td>
<!-- End Content -->
      </tr>
      
<tr>
  <td colspan="4" height="30" valign="middle" style="text-align:left; border-bottom: 1px solid #E5AF51; margin: 0; padding-bottom: 5px"><img src="logo.jpg" alt="Logo" width="160" height="30" /></td>
  </tr>
<tr>
 
 
<!-- Start Footer -->
            
 
        <td width="160" valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; text-align:left; color:#666666; margin: 0; padding-top:5px;">Unit 5 <br />
2 Bligh Street<br />
Suburb NSW 2001 </td>
        
        <td width="170" valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; text-align:left; color:#666666; margin: 0; padding-top:5px;"><span style="color: #000; font-weight:bold">T:</span> +61 2 9513 0000 <br />
     <span style="color: #000; font-weight:bold">F:</span> +61 2 9516 0000 <br />
     <span style="color: #000; font-weight:bold">W: </span><a href="http://www.newsite.com.au" style="text-decoration:none; color:#666666;">www.newsite.com.au</a></td>
        <!-- End Footer -->
  </tr>
</table>
</body>
</html>

Open in new window

0
Comment
Question by:gwh2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21787542
Try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Unititled</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff" style="margin: 0; padding: 0;">
<!-- Start Table -->
<table width="330" height="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: 0;">
<tr>
<!-- Start Content -->
<td colspan="2" align="left" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;  color:#000; padding: 0; margin: 0;"><p style="margin: 0; padding: 0;">Yours sincerely, 

  <span style="font-weight:bold">Firstname Lastname</span>
  </p>
  
</td>
<!-- End Content -->
??????</tr>
??????
<tr>
  <td colspan="4" height="30" valign="middle" style="text-align:left; border-bottom: 1px solid #E5AF51; margin: 0; padding-bottom: 5px"><img src="logo.jpg" alt="Logo" width="160" height="30" /></td>
  </tr>
<tr>
 
 
<!-- Start Footer -->
            
 
        <td width="160" valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align:left; color:#666666; margin: 0px; padding:0px !important;;">Unit 5  
2 Bligh Street 
Suburb NSW 2001 </td>
        
        <td width="170" valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align:left; color:#666666; margin: 0; padding:0px !important;"><span style="color: #000; font-weight:bold">T:</span> +61 2 9513 0000  
     <span style="color: #000; font-weight:bold">F:</span> +61 2 9516 0000  
     <span style="color: #000; font-weight:bold">W: </span><a href="http://www.newsite.com.au" style="text-decoration:none; color:#666666;">www.newsite.com.au</a></td>
        <!-- End Footer -->
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:gwh2
ID: 21787561
Thanks for replying,

I'm not sure what you did  the only thing I can see that you added is:

<!-- End Content -->
??????</tr>
??????
<tr>

can you explain?
0
 
LVL 1

Author Comment

by:gwh2
ID: 21787568
Alli it does is add a whole bunch of question marks below the name. Any other suggestions?
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 82

Expert Comment

by:hielo
ID: 21787616
Those question marks were added by the browser, not me. I removed padding-top and also line-height from the original post. Not sure why those question marks were added but you need to get rid of them.
0
 
LVL 1

Author Comment

by:gwh2
ID: 21787767
Hi,

I removed the padding and line-height and also used !important where you used it. When I tested the problem is still persisting. My revised code is below.

Do you know what might be happening?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Unititled</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff" style="margin: 0; padding: 0;">
<!-- Start Table -->
<table width="330" height="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: 0;">
<tr>
<!-- Start Content -->
<td colspan="2" align="left" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;  color:#000; padding: 0; margin: 0;"><p style="margin: 0; padding: 0;">Yours sincerely,<br /><br />
  <span style="font-weight:bold">Firstname Lastname </span>
  </p>
  <br /></td>
<!-- End Content -->
</tr>
<tr>
  <td colspan="4" height="30" valign="middle" style="text-align:left; border-bottom: 1px solid #E5AF51; margin: 0; padding-bottom: 5px"><img src="logo.jpg" alt="Logo" width="160" height="30" /></td>
  </tr>
<tr>
 
 
<!-- Start Footer -->
            
 
        <td width="160" valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align:left; color:#666666; margin: 0 !important; padding: 0 !important;">Unit 5<br />
2 Bligh Street<br />
Suburb NSW 2001 </td>
        
        <td width="170" valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align:left; color:#666666; margin: 0 !important; padding: 0 !important;"><span style="color: #000; font-weight:bold">T:</span> +61 2 9513 0000 <br />
     <span style="color: #000; font-weight:bold">F:</span> +61 2 9513 0000 <br />
     <span style="color: #000; font-weight:bold">W: </span><a href="http://www.newsite.com.au" style="text-decoration:none; color:#666666;">www.newsite.com.au</a></td>
        <!-- End Footer -->
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
hielo earned 1500 total points
ID: 21788711
>>Do you know what might be happening?
IF what you posted renders as YOU want it when you test it by itself, then most likely there are style definitions in gmail that is affecting your design. You would need to look at the css of gmail and figure which one of those is affecting your design. For example, if gmail has a something like:
td{background-color:green;}

and you don't want that, then you would need to override that in YOUR html.
0
 
LVL 1

Author Comment

by:gwh2
ID: 21789373
I was saying in my original post that there was a problem with extra space in Gmail and I understand that Gmail must have certain css definitions such as putting extra space after paragraphs etc. and that is why I added the !important rules to my css to override it, eg.

        <td width="160" valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align:left; color:#666666; margin: 0 !important; padding: 0 !important;">Unit 5<br />
2 Bligh Street<br />
Suburb NSW 2001 </td>

...but it hasn't helped which is why I'm asking for help. Do you know why the extra space is continuing even after adding the !important rule?
0
 
LVL 1

Author Closing Comment

by:gwh2
ID: 31467297
Hi,

I found that these spacing problems are only occurring in the Gmail and Hotmail on a mac computer - they don't seem to be a problem on the pc side, so I guess it's a mac issue.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Resolve Outlook connectivity issues after moving mailbox to new Exchange 2016 server
Ransomware continues to be a growing problem for both personal and business users alike and Antivirus companies are still struggling to find a reliable way to protect you from this dangerous threat.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question