I use Thunderbird to comunicate with my clients. I created a footer with my data. Unfortunately, the mail converted my email address and website link to "links" and blue text. I decided to use CSS with
a.link {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
And works great ! But when the customer responds to my message and sends it to me, I receive a converted email address and a link to the page in blue text or link. The problem is that such messages often go to spam. Another issue is I have to remove some of the footer from the answer, otherwise the customer will receive a "linked" footer as a response. How can I make the customer not convert part of the footer into links when replying to my message? Below I paste a picture. The first is the message that the customer receives, while the second photo shows the message with my footer to which the customer responded.
Picture 1
Picture 2
And here is my HTML code
<html>
<head>
<title>Enail Footer</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<!-- ####### Convert blue text and "www" & "#" to normal text #########-->
<style>
a.link {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>
<body>
<table style="width: 400px; font-size: 10pt; font-family: Arial, sans-serif; line-height:normal;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="400" style="width:400px" colspan="2"> <span style="font-size:10pt; font-family: Arial, sans-serif; color: #000000;">Best regards</span> </td>
</tr>
<tr>
<td width="400" style="width:400px; padding-top:5px" colspan="2"> <span style="font-size:18pt; font-family: Arial, sans-serif; color: #000000; padding-bottom:5px;">My name</span> </td>
</tr>
<tr>
<td width="400" style="width:400px;" colspan="2"> </td>
</tr>
<tr>
<td style="padding-right:15px; border-right:2px solid #d7bda6" width="162" valign="top"><span><img width="192" border="0" alt="Logo" style="border:0;max-width:830px; padding-top:15px;" src="http://beiga.pl/wp-content/themes/beiga/img/logo.png"></span> </td>
<td style="padding-left:15px; vertical-align: top;" valign="top">
<img style="vertical-align: middle;" src="http://designstrony.pl/wp-content/uploads/2019/11/telefon-01-1.png" alt="Telefon" width="25" height="25" />
<span style="font-family: Arial, sans-serif; color:#000000;">000 000 000<br></span>
<img style="vertical-align: middle;" src="http://designstrony.pl/wp-content/uploads/2019/11/email-01-1.png" alt="Email" width="25" height="25" />
<span style="font-family: Arial, sans-serif; color:#000000;">beiga<a class="link">#</a>website.com<br></span>
<img style="vertical-align: middle;" src="http://designstrony.pl/wp-content/uploads/2019/11/witryna-01-1.png" alt="Witryna" width="25" height="25" />
<span style="font-family: Arial, sans-serif; color:#000000;"><a class="link">www.website.com</a><br></span>
<span>
<img style="vertical-align: middle;" src="http://designstrony.pl/wp-content/uploads/2019/11/facebook-01.png" alt="Facebook" width="25" height="25" />
<span style="font-family: Arial, sans-serif; color:#000000;">facebook.com/<br></span></span> </td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I have a custom HTML signature I am working on but am struggling to make it look consistent and correct across the majority of email clients. The CSS is all inlined and I am following the Email CSS standards accurately as far as I can tell.
The main problem occurring is that between different email clients (Gmail, iOS Mail, etc) the text color changes to black sometimes, and is not consistently the blue that I have set it to, and the vertical alignment of the text in relation to the image shifts and is inconsistent. Also, I cannot consistently get the text-decoration on the link to go away. Code with identifying information removed is below.
HTML before inlining
<head>
<meta charset="utf-8" />
<style>
* {
font-style: normal;
font-stretch: normal;
line-height: 17px;
letter-spacing: normal;
font-family: Avenir, Arial, sans-serif;
font-size: 14px;
border-collapse: collapse;
color: #000157 !important;
text-decoration: none !important;
}
.table-wrapper {
padding-top: 10px;
padding-left: 10px;
}
.personal-image-wrapper {
vertical-align: center;
}
.info-wrapper {
padding-left: 15px;
}
.info-name {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr>
<td class="table-wrapper">
<table>
<tr>
<td class="personal-image-wrapper">
<a href="https://www.google.com/" target="_blank">
<img width="150px" height="65px" class="personal-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Black.png/440px-Black.png" />
</a>
</td>
<td class="info-wrapper">
<table>
<tr>
<td class="info-name">First Last</td>
</tr>
<tr>
<td class="info-profession">Job Description</td>
</tr>
<tr>
<td class="info-website">
website.com</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
HTML after inlining using https://putsmail.com/inliner
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta charset="utf-8">
</head>
<body style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<table style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<td class="table-wrapper" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;padding-top:10px;padding-left:10px;color:#000157 !important;text-decoration:none !important;">
<table style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<td class="personal-image-wrapper" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;vertical-align:center;color:#000157 !important;text-decoration:none !important;">
<a href="https://www.google.com/" target="_blank" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<img width="150px" height="65px" class="personal-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Black.png/440px-Black.png" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;"/>
</a>
</td>
<td class="info-wrapper" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;padding-left:15px;color:#000157 !important;text-decoration:none !important;">
<table style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<td class="info-name" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;font-size:16px;font-weight:bold;color:#000157 !important;text-decoration:none !important;">First Last</td>
</tr>
<tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<td class="info-profession" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">Job Description</td>
</tr>
<tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
<td class="info-website" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
website.com
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Could you explain how you're testing your code and how you're setting up this code as an email signature? This might play a big role in the final results as what’s supported would ultimately be defined by the email client you're using to send your emails.
I see a few things that are known to cause problems in your code already:
The lack of reset attributes in your <table> tags make your tables styles subject to clients default styles. Add border="0" cellpadding="0" cellspacing="0" role="presentation" for more consistent rendering.
width="150px" height="65px" on the <img> must be defined without units or the Outlooks on Windows will ignore it. So make that width="150" height="65".
Inline !important declarations are not supported by the Outlooks on Windows.
Overall, your code could also be made a whole lot simpler by using a single table and more semantic elements. Here’s a suggestion of code you could use:
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding:10px; vertical-align:middle;"><a href="https://www.example.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Black.png/440px-Black.png" alt="" border="0" width="150" height="65" style="vertical-align:middle; color:#000157; font:14px/17px Avenir, sans-serif; background:#eee;" /></td>
<td style="padding:10px 5px; vertical-align:middle;">
<p style="margin:0; color:#000157; font:bold 16px/19px Avenir, sans-serif; text-align:left;">
First Last
</p>
<p style="margin:0; color:#000157; font:14px/19px Avenir, sans-serif; text-align:left;">
Job Description
</p>
<p style="margin:0; color:#000157; font:14px/19px Avenir, sans-serif; text-align:left;">
example.com
</p>
</td>
</tr>
</table>
This question already has answers here:
How to remove the underline for anchors(links)?
(15 answers)
Closed 2 years ago.
I am trying to create an email signature that has a website link. However, the link appear as underlined. I tried many options to remove the underline from the website link but failed. Any Idea to solve this?
<html>
<head>
<title>Email Signature</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<table
style="
width: 424px;
font-size: 10pt;
font-family: Arial, sans-serif;
line-height: normal;
"
cellpadding="0"
cellspacing="0"
border="0"
>
<tbody>
<tr>
<td
style="padding-right: 15px; border-right: 1px solid #317a00;"
width="150"
style="width: 150px; vertical-align: top;"
valign="top"
align="center"
>
<a href="{logoURL}" target="_blank"
><img
width="81"
border="0"
alt="Logo"
style="border: 0; max-width: 150px;"
src="logo.png"
/></a>
</td>
<td
style="padding-left: 15px; vertical-align: top; font-size: 9pt;"
valign="top"
>
<strong
style="
font-size: 10pt;
font-family: Arial, sans-serif;
color: #317a00;
"
>{firstName} {lastName}</strong
><br />
<span
style="
font-size: 10pt;
font-family: Arial, sans-serif;
color: #000000;
padding-bottom: 5px;
"
>{title}</span
><br />
<br />
<span style="font-family: Arial, sans-serif; color: #000000;"
><span style="font-weight: bold; color: #317a00;">T: </span
>{phone}<br
/></span>
<span style="font-family: Arial, sans-serif; color: #000000;"
><span style="font-weight: bold; color: #317a00;">M: </span
>{mobile}<br
/></span>
<span style="font-family: Arial, sans-serif; color: #000000;"
><span style="font-weight: bold; color: #317a00;">E: </span
>{email}<br
/></span>
<br /><span
ng-if="showField('company')"
style="
font-size: 9pt;
font-family: Arial, sans-serif;
color: #000000;
"
>{company}</span
>
<br /><br />
</td>
</tr>
<tr>
<td align="center" style="border-right: 1px solid #317a00;">
<a href="{instagramURL}" target="_blank"
><img
alt="Instagram icon"
border="0"
width="18"
height="18"
style="border: 0; height: 18px; width: 18px;"
src="it.png" /></a
>
<a href="{pinterestURL}" target="_blank"
><img
alt="Pinterest icon"
border="0"
width="18"
height="18"
style="border: 0; height: 18px; width: 18px;"
src="pt.png"
/></a>
</td>
<td style="padding-left: 15px;">
<a href="http://{website}" target="_blank"
><span
style="
font-size: 9pt;
font-family: Arial, sans-serif;
color: #317a00;
font-weight: bold;
"
>{website}</span
></a
>
</td>
</tr>
<tr>
<td width="424" style="width: 424px; padding-top: 15px;" colspan="2">
<a href="{bannerURL}" target="_blank" rel="noopener"
><img
border="0"
src="banner.png"
alt="Banner"
style="max-width: 424px; height: auto; border: 0;"
/></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This should do it:
<span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span>
more info on styling links in css can be found here: https://www.w3schools.com/css/css_link.asp
Use Text-decoration: none; you can use it in css and inline too.
/*a {text-decoration: none;}*/
<html><head><title>Email Signature</title>
<meta content="text/html; charset=utf-8"http-equiv="Content-Type">
</head>
<body>
<table style="width: 424px; font-size: 10pt; font-family: Arial, sans-serif;; line-height:normal;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="padding-right:15px; border-right:1px solid #317a00;" width="150" style="width:150px; vertical-align: top;" valign="top" align="center">
<img width="81" border="0" alt="Logo" style="border:0;max-width:150px" src="logo.png">
</td>
<td style="padding-left:15px; vertical-align: top; font-size:9pt" valign="top">
<strong style="font-size:10pt; font-family: Arial, sans-serif;; color: #317a00;;">{firstName} {lastName}</strong><br>
<span style="font-size:10pt; font-family: Arial, sans-serif;; color: #000000;; padding-bottom:5px;">{title}</span><br>
<br>
<span style="font-family: Arial, sans-serif;; color:#000000;;"><span style="font-weight:bold; color:#317a00;; ">T: </span>{phone}<br></span>
<span style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">M: </span>{mobile}<br></span>
<span style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">E: </span>{email}<br></span>
<br><span ng-if="showField('company')" style="font-size: 9pt; font-family: Arial, sans-serif;; color: #000000;;">{company}</span>
<br><br>
</td>
</tr>
<tr>
<td align="center" style="border-right:1px solid #317a00;">
<img alt="Instagram icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="it.png">
<img alt="Pinterest icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="pt.png">
</td>
<td style="padding-left:15px;">
<span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span>
</td>
</tr>
<tr>
<td width="424" style="width:424px;padding-top:15px;" colspan="2">
<img border="0" src="banner.png" alt="Banner" style="max-width:424px; height:auto; border:0;">
</td>
</tr>
</tbody>
</table>
</body>
</html>
Have you tried this? : text-decoration:none;
Add a style attribute to the anchor tag and add the text-decoration to none. Example:
style="text-decoration: none"
try this CSS style.
a,a:hover{text-decoration: none;}
Add inline CSS to the anchor tag
style="text-decoration: none;
This question already has an answer here:
Wrong display of html e-mail in Outlook
(1 answer)
Closed 4 years ago.
I'm trying to create a html based email signature with tables.
It's definitely working in html, works when I copy and paste into gmail, however when I copy into Outlook, the CSS break. Did I do something wrong here?
<table style="width: 500px; font-size: 12pt; font-family: Arial,sans-serif; line-height:normal;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:86px; vertical-align:middle;" valign="middle">
<img border="0" alt="Logo" height="auto" width="148" style="width:148px; height:auto; border:0;" src="https://i.imgur.com/1HlZfl8.png">
</td>
<td style="width:45px; text-align:center; vertical-align:middle;" valign="middle">
<div style="margin-left:15px"><img src="https://i.imgur.com/mNNR1Ga.png"></div>
</td>
<td style="width:500px; vertical-align:middle;" valign="middle">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size:12pt; font-family: Arial, sans-serif; color: #3d3c3f; padding-bottom:3px;"><span style="font-weight: bold; font-family: Arial, sans-serif; color:#3c3c3b;">Jessica Smith</span>
<span style="font-size:9pt; font-family: Arial, sans-serif; color:#3c3c3b;"> | CEO/Founder</span></td>
</tr>
<tr>
<td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">t </div>(07) 3281 0000</span><span style="font-family: Arial, sans-serif; color:#3c3c3b"></span><span style="font-family: Arial, sans-serif; color:#3c3c3b; margin-left:10px;"><div style="font-weight:bold; display: inline-block; width: 15px;">f</div>(07) 3281 0000</span>
</td>
</tr>
<tr>
<td width="20px" style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b; "><div style="font-weight:bold; display: inline-block; width: 15px;">e </div>info#domainnamehere.com.au</span>
</td>
</tr>
<tr>
<td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">w </div>domainnamehere.com.au</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width:500px; padding-top:16px;" colspan="3" width="500">
<img border="0" alt="Banner" width="500" style="width:500px; height:auto; border:0;" src="https://i.imgur.com/NBxWjRC.png">
</td>
</tr>
</tbody>
</table>
Gmail Screenshot
Outlook Screenshot
Not sure what's going on.
Email clients does not strictly follow HTML Standards. The viewing technology of a typical email client isn't as up-to-date as a web browser. You need to be careful about that. HTML code works in your browser may not work on Email Clients.
You may want to read Mailchimps Article and visit this link for the CSS Support
I'm working on an email HTML template and I sent a test to my gmail account. I specified every <td> element's width and made sure all the <td> width in a row add up to exact the table width. But it seems to me that gmail always adds or deletes some decimal number for the td width I specified, which results in a little mismatch between the table width and the overall td width. And this mismatch will show a small gap between the border of the table and the last td in a row, which is kind of annoying to me. Does anybody know how to fix this issue?
Actually this mismatch only happens in gmail. Hotmail and yahoo don't have this problem.
The code is as follows:(there are some Chinese characters in it and you can just ignore them)
<table width="650" cellpadding="0" cellspacing="0" style="border: 10px solid black;">
<tr>
<td style="width: 18px; font-size: 30px; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
<td width="297" style="vertical-align: top;">
<table width='297' cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" height="175" style="width: 297px; height: 175px; line-height: 175px; max-height: 175px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
让<span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; font-weight: bold;">Bomoda</span>
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
</td>
</tr>
<tr>
<td colspan="2" height="31" style="width: 297px; height: 31px; line-height: 31px; max-height: 31px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; color: #000001; text-align: left; line-height: normal;">
<span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; ">Bomoda</span>Newsletter
</td>
</tr>
<tr>
<td colspan="2" height="36" style="width: 297px; height: 36px; line-height: 36px; max-height: 36px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td width="116">
<a href="http://www.bomoda.com" target="_blank" style="display: block; text-decoration: none;">
<img border="0" src="http://m.bomoda.com/static/img/email/retention_email/button.jpg" alt="" style="display: block; width: 116px; height: 27px;" />
</a>
</td>
<td width="181">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="315">
<img border="0" alt="Bomoda" style="display: block; width: 315px; height: 458px;" src="http://m.bomoda.com/static/img/email/retention_email/A.jpg" />
</td>
</tr>
</table>
As you can see, the 650-width table only have one row with three td in it. Their widths are 18, 297 and 315 respectively, which is equal to 630 in total(taking into account the table has 10-width border on the left and right). But when I use developer tools in chrome to see the width of each td, it shows me the calculated width of each td is 17.27272605895996, 296.3636169433594 and 315.45452880859375 respectively, which could not add up to 630. So there will be a small gap between the table border and the rightmost picture.
Try putting an empty row with 2 cols above all the colspan'd rows. Sometimes you can have issues when you don't specify the col widths in the first row of the table.
Not sure if this will fix your issue, but I've had issues in the past with not setting the col widths first...
I've created an html signature I need to use in Outlook. Following recommendations, I've used a table layout, given all images and even td's, tr's and the table itself specific height and width, 0 padding and margin, and even tried adding those in both css and in the old-fashion way on the actual tags.
In outlook, it comes out right, but in gmail it adds a gap between the tr's.
Following the recommendation here: Gmail displaying gaps between images, I've tried to add style="display:block;" to the images, still no luck.
Here is the code I use:
<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;"> </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;"><img style="border:none;" src="new_sig.files/sig4.png" width="83px" height="64px"></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/>
www.site.com
<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"/>
name#site.com
</td>
</tr>
</table>
Now, the code gmail reads, apparently, goes like this:
<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: "Times New Roman","serif";"> </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: "Times New Roman","serif";">
<img height="90" width="150" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></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: "Times New Roman","serif";">
<img height="90" width="359" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></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: "Times New Roman","serif"; color: blue; text-decoration: none;">
<img height="64" width="83" border="0" src=""></span></a><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></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: "Times New Roman","serif";">
<img height="64" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></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: "Times New Roman","serif";">
<img height="64" width="359" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></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: "Times New Roman","serif";">
<img height="100" width="83" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></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: "Times New Roman","serif";">
<img height="100" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></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 tried also giving the whole table line-height of 0, but that didn't work either.
The 2 images in the last cell, btw, aren't displayed in gmail for some reason.
update: didn't really notice this received more answers till now. we ended up simplifying the design/code a bit, and i stopped checking this page after a while. not sure if any of the solutions here would have worked, but i see they helped other people. thnx anyways :)
For table cells that only contain an image, set the line-height to 0
<td style="line-height:0"><img ... /></td>
( Email On Acid was a good tip. )
Well, I couldn't replicate the problem by sending an email to my Gmail account, but I did see the problem while checking the HTML in the Opera browser.
Try adding vertical-align: middle; to the problematic <TD>. It did the trick for Opera.
That is, of course, without seeing the images, but the vertical align shouldn't brake anything.
You may also want to check out this tool:
http://www.emailonacid.com/
The free version allows you to check AOL Web, Gmail and Outlook 2003.
Try placing this in the head:
<style type="text/css">
<!--
p.MsoNormal {
margin: 0px !important;
}
-->
</style>
It should override the styling that unwillingly appears in Gmail.
You mentioned that you tried adding style="display:block" to your images but I don't see this in your code. A couple of things fixed these situations for me in Gmail:
Add border="0" and style="display:block" into every element
When specifying widths and heights in attributes (rather than in the "style" attribute) don't include "px", just the number
So if you ensure all of your images are in the following format it should remove those gaps (assuming they aren't put there by incorrect height values).
<img alt="something" src="http://somewhere.com/image.png" width="35" height="35" border="0" style="display:block;" />
Solution worked for me is I sum up each and every solution given 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 fine for me...