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...
Related
I am in the process of creating an email signature and came across an issue where for some reason when sending an email from Outlook to Gmail when you look on the iPhone mobile Gmail app the signatures stretch vertically adding a ton of space between elements? I will show an image below for reference.
When viewing the signature on desktop everything looks fine and even when viewing it via Outlook or Apple mail on Mobile it looks fine, only for Gmail on mobile? I was just wondering why this might be and how could I go about fixing it? Thank you! :)
Here is the signature code:
<body><div width="500" height="250" style="max-width: 500px; max-height: 250px; padding: 0; margin: 0; box-sizing: border-box;">
<!--SIGNATURE-->
<table border="0" cellspacing="0" cellpadding="0">
<!-- SECTION 1 PHOTOS DELETE WHEN FINISHED -->
<tbody><tr><td style="text-align: center;">
<table border="0" cellspacing="0" cellpadding="0" width="120" height="250" style="max-width: 120px; max-height: 250px;">
<tbody><tr>
<td>
<img src="https://www.azlendingexperts.com/images/bio_richard.jpg" alt="Headshot" id="imgchangeroutput" height="180" width="120" style="height: 180px; width: 120px; padding-bottom: 0;">
</td>
</tr>
<tr>
<td style="padding: 10px;"></td>
</tr>
<tr>
<td>
<a href="https://az-lending-experts-apply-now.secure-clix.com/" target="_blank">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png" alt="Apply Now Button" height="30" style="height: 30px;">
</a>
</td>
</tr>
<tr>
<td>
<a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranking.png" alt="1 Mortage Broker Ranking Arizona Logo" width="120" style="width: 120px;">
</a>
</td>
</tr>
</tbody></table>
</td>
<!---------------------------------------------------------------------------------------------------->
<!-- SECTION 2 Information DELETE WHEN FINISHED -->
<!---------------------------------------------------------------------------------------------------->
<td><table border="0" cellspacing="0" cellpadding="0" width="350">
<!-- Main Logo -->
<tbody><tr>
<td>
<a href="https://www.azlendingexperts.com/" target="_blank">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png" alt="AZ Lending Experts LCC logo" height="50">
</a>
</td>
</tr>
<tr>
<td style="padding: 10px;"></td>
</tr>
<tr>
<!-- INFO 1 NAME & NMLS -->
<td>
<div style="font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;" id="text-box">Richard Simon</div>
<div style="font-family: Arial, sans-serif; color: #767171; font-size: 14px; font-weight: bold;"><span id="titleoutput">Owner</span> NMLS #<span id="nmlsoutput">155480</span></div>
</td>
</tr>
<tr>
<td style="padding: 10px;"></td>
</tr>
<!-- INFO 2 Mobile,Office,Email -->
<tr>
<td>
<div id="Mobile">
<span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Mobile: </span>480.239.3875
</div>
<div id="Office"><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Office: </span><span style="">480.649.3825</span></div>
<div id="email"><div><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Email: </span><span><a id="emailoutput" href="mailto:rsimon#azlendingexperts.com" style="font-family: Arial, sans-serif;color:#767171; font-size: 14px;">rsimon#azlendingexperts.com</a></span></div>
</div>
</td>
</tr>
<tr>
<td style="height: 20px;"></td>
</tr>
<tr>
<td>
4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282
</td>
</tr>
<tr>
<td>
www.azlendingexperts.com
</td>
</tr>
<tr>
<td>
<!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png" alt="facebook logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png" alt="instagram logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png" alt="youtube logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png" alt="linkedin logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png" alt="twitter logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png" alt="Google Reviews" height="45">
</td>
</tr>
</tbody></table></td>
</tr></tbody></table>
</div>
</body>
I have once again solved my own question. I did some troubleshooting cross-referencing some existing working signatures and found that when using the div element margin was added once Gmail compiled it from outlook office 365. The solution was to use the span element for everything as it is inline it can't allow for margin on Top or Bottom there for solving the issue.
I will leave the code of the working version meant to be installed onto Outlook Office 365 just saying when you look at it on the browser it looks like there are still spacing issues but those are there on purpose so that once installed onto office 365 Outlook it will be perfect specifications as they compile sizing differently then the browser would.
<body>
<div width="500" height="250" style="max-width: 500px; max-height: 250px">
<!--SIGNATURE-->
<table border="0" cellspacing="0" cellpadding="0">
<!-- SECTION 1 PHOTOS DELETE WHEN FINISHED -->
<tbody>
<tr >
<td valign="top"style="max-height: 250px;text-align: center; padding-right: 10px;">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="120"
height="250"
style="max-width: 120px; max-height: 250px"
>
<tbody>
<td cellpadding="0" style="text-align: center; padding-top: 10px; padding-bottom: 6px; width: 120px; height: 160px;">
<img
src="https://www.azlendingexperts.com/images/bio_richard.jpg"
alt="Headshot"
id="imgchangeroutput"
height="160"
style="height: 160px; max-width: 120px"
/>
</td>
</tr>
<tr style="padding-bottom: 6px; text-align: center;">
<td height="26">
<a
href="https://az-lending-experts-apply-now.secure-clix.com/"
target="_blank"
>
<img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png"
alt="Apply Now Button"
height="26"
style="height: 26px;"
/>
</a>
</td>
</tr>
<tr style="padding-bottom: 12px; text-align: center; ">
<td>
<a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
<img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranker.png"
alt="1 Mortage Broker Ranking Arizona Logo"
width="110"
style="width: 110px"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<!---------------------------------------------------------------------------------------------------->
<!-- SECTION 2 Information DELETE WHEN FINISHED -->
<!---------------------------------------------------------------------------------------------------->
<td style="max-width: 350px; max-height: 250px">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="350"
height="250"
style="max-width: 350px; max-height: 250px"
>
<tbody>
<tr>
<td
valign="top"
style="
font-size: 9pt;
font-family: Arial, sans-serif;
line-height: 11pt;
"
>
<!-- Main Logo -->
<a href="https://www.azlendingexperts.com/" target="_blank">
<img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png"
alt="AZ Lending Experts LCC logo"
height="50"
width="270"
style="height: 50px; width: 270px;"
/><br>
</a>
<!-- INFO 1 NAME & NMLS -->
<br /><span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
"
id="text-box"
>
Richard Simon </span
><br />
<!-- INFO 2 Mobile,Office,Email -->
<span
style="
font-family: Arial, sans-serif;
color: #767171;
font-size: 14px;
font-weight: bold;
"
>
<span>
<span id="titleoutput">Owner</span> NMLS
#<span id="nmlsoutput">155480</span> </span
></span>
<br /><br>
<span id="Mobile">
<span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
"
>Mobile: </span
><a
href="tel:4802393875"
target="_blank"
id="phone1output"
style="
font-family: Arial, sans-serif;
text-decoration: none;
color: #767171;
font-size: 14px;
"
>480.239.3875</a
> </span
><br />
<span id="Office">
<span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
"
>Office: </span
><span style=""
><a
href="tel:4806493825"
target="_blank"
id="phone2output"
style="
font-family: Arial, sans-serif;
text-decoration: none;
color: #767171;
font-size: 14px;
"
>480.649.3825</a
></span
>
</span>
<br />
<span id="email">
<span>
<span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
"
>Email: </span
><span
><a
id="emailoutput"
href="mailto:rsimon#azlendingexperts.com"
style="
font-family: Arial, sans-serif;
color: #767171;
font-size: 14px;
"
>rsimon#azlendingexperts.com</a
></span
>
</span>
</span>
<br>
<br />
<span>
<span style="">
<a
href="https://www.google.com/maps/place/4500+S+Lakeshore+Dr+%23595,+Tempe,+AZ+85282/data=!4m2!3m1!1s0x872b062196b8962b:0x93f0ee8ff2a4f8e1?sa=X&ved=2ahUKEwi7gLH_15H0AhX2HzQIHTkDDpcQ8gF6BAgSEAE"
target="_blank"
style="
font-family: Arial, sans-serif;
text-decoration: none;
color: #767171;
font-size: 12px; ;
"
>4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282</a
>
</span>
<br />
<span><a
href="https://www.azlendingexperts.com/"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 14px"
>www.azlendingexperts.com</a
></span>
</span>
<br>
<span>
<a
href="https://www.facebook.com/RichardSimonMortgage"
id="facebookoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png"
alt="facebook logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://www.instagram.com/richardsimonmortgage/"
id="instagramoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png"
alt="instagram logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://www.youtube.com/channel/UCfFk2G78rqkCC5j9h_m3PvQ"
id="youtubeoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png"
alt="youtube logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://www.linkedin.com/in/richardsimonmortgage"
id="linkedinoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png"
alt="linkedin logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://twitter.com/azlendingexpert"
id="twitteroutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png"
alt="twitter logo"
height="25"
width="25"
style="height: 25px; width: 25px;"/></a
>
<a href="" target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png"
alt="Google Reviews"
height="35"
width="90"
style="height: 35px; width: 90px;"
/></a>
</span>
</td>
</tr>
<tr>
<td>
<!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
I hope this helps someone who is having the same issue because I have looked for months and have not found a single answer until I found it myself. Not even StackOverflow has had a similar problem it seems as no one could help or pose a similar question before.
Your answer helped! I did go through my code and added a lot of your extra code bit by bit, and it took me a while to land the snippet that solved my problem. I then cut the non-changing snippets from my code without the issue coming back.
I'll explain my process just in case it can help someone else down the road.
My signature varies from this one in that it is made up of image slices only, with the slices with phone and website being clickable. I have 3 rows across, one image in the first and last row, then my info given in a stack of images in the middle row. Finally, there is one long image on the bottom that spans the entire signature. I had initially got rid of the spacing around all of my other images (I'll include my code before tbody at the bottom), but my stacked, middle-row info still had unwanted spacing above and below the images.
I did not need to add any extra details after or . The snippet that mattered was adding height to the image style. All of my images have the border-collapse and display style to get rid of the spacing, and then adding the height to the images in the middle-row stack resolved the lingering above/below spacing.
<img height="26" width="175" alt="" border="0" style="border-collapse:collapse; display:block!important; height:26px;" src="http://imageurl.jpg">
Here's the html I have before tbody that also impacts spacing:
<meta name="viewport" content="width=device-width" http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size:0.0em;}
img {display:block; float:left; padding:0; margin:0; align:absbottom; align:texttop;}
</style>
<div dir="auto">
<table id="zs-output-sig" bgcolor="#FFFFFF" width="500" height="146" border="0" cellpadding="0" cellspacing="0">
<tbody>
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;
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>
I have the following code (is for campaign monitor):
Left Image:
<table cellspacing="0" border="0" cellpadding="0" valign="top">
<tr>
<td class="content" valign="top" height="200"
style="padding: 0 20px 20px 20px; color: #333; font-size: 14px; line-height: 20px; font-family: Helvetica, Arial, sans-serif"
width="600">
<img src="./images/logo.gif" alt=""
width="260" align="left"
editable="true" hspace="10"
label="Image"/>
<multiline label="Description">Enter your
description here.
</multiline>
<span class="button">
<singleline label="Link">Link</singleline>
</span>
</td>
</tr>
</table>
Right Image:
<table cellspacing="0" border="0" cellpadding="0" valign="top">
<tr>
<td class="content" valign="top" height="200"
style="padding: 0 20px 20px 20px; color: #333; font-size: 14px; line-height: 20px; font-family: Helvetica, Arial, sans-serif"
width="600">
<img src="./images/logo.gif" alt=""
width="260" align="right"
editable="true" hspace="10"
label="Image"/>
<multiline label="Description">Enter your
description here.
</multiline>
<span class="button">
<singleline label="Link">Link</singleline>
</span>
</td>
</tr>
</table>
On Outlook The text next to the image is middle aligning with the image when it should be top aligning.
All other clients appear to be fine.
Have you tried adding vertical-align: top; to the style attribute within the td instead of using the attribute valign?
Also maybe move the height to the style attribute to.
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...