CAE5942
asked on
Email signature not rendering correctly in Gmail and Hotmail
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.
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>
ASKER
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?
I'm not sure what you did the only thing I can see that you added is:
<!-- End Content -->
??????</tr>
??????
<tr>
can you explain?
ASKER
Alli it does is add a whole bunch of question marks below the name. Any other suggestions?
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.
ASKER
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?
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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
<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?
ASKER
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.
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.
Open in new window