I have an html newsletter which works in most email carriers but the formatting is messed up in outlook. Here is a snippet of the email as this is the only part that is playing up:
<td align="left" valign="top" bgcolor="#666f87" style="background: #666f87;">
<div style="color: #cccccc;">
<p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-bottom: 10px; margin-top: 0;"><strong>Social Media:</strong></p>
<p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;">
<img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="facebook.png" alt="Facebook" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="#" title="Facebook" >Become a fan on Facebook</a></span>
</p>
<p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;">
<img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="twitter.png" alt="Twitter" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="#" title="Twitter" >Follow us on Twitter</a></span>
</p>
<p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;">
<img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="youtube.png" alt="Youtube" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="https://www.google.co.uk/" title="Youtube" >Watch us on Youtube</a></span>
</p>
</div>
</td>
The "vertical-align: middle;" style does not work in Outlook 2007/2010 and the text next to the image is appearing below the image. Does anyone know of a work around to get the text to align to the middle of the image? It works fine in other email clients. It is just Outlook that is causing problems.
i never success to use "vertical-align" statement in Outlook.
I made table for hack this but it not really easy
Try this
<td align="left" valign="top" bgcolor="#666f87" style="background: #666f87;">
<table border="0" cellpadding="0" cellspacing="0" align="left" >
<tr>
<td align="left" colspan="3">
<font style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-bottom: 10px; margin-top: 0;">
<strong>Social Media:</strong>
</font>
</td>
</tr>
<tr>
<td align="left">
<img style="border:0; display: inline-block;" src="facebook.png" alt="Facebook" />
</td>
<td width="5" />
<td align="left">
<span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;">
<a style="color: #cccccc;" href="#" title="Facebook" >
Become a fan on Facebook
</a>
</span>
</td>
</tr>
<tr>
<td align="left" colspan="3" height="5" />
</tr>
<tr>
<td align="left" valign="middle">
<img style="border:0; display: inline-block;" src="twitter.png" alt="Twitter" />
</td>
<td width="5" />
<td align="left">
<span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;">
<a style="color: #cccccc;" href="#" title="Twitterk" >
Follow us on Twitter
</a>
</span>
</td>
</tr>
<tr>
<td align="left" colspan="3" height="5" />
</tr>
<tr>
<td align="left" valign="middle">
<img style="border:0; display: inline-block;" src="youtube.png" alt="Youtube" />
</td>
<td width="5" />
<td align="left">
<span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;">
<a style="color: #cccccc;" href="https://www.google.co.uk/" title="Youtube" >
Watch us on Youtube
</a>
</span>
</td>
</tr>
</table>
Related
I've not been able to achieve it because media-query is not supported on Gmail IMAP which my client uses.
How do I achieve the column layout on the top to be like the stacking elements below it without any media query?
What is the workaround of it?
I can't find any workaround
The column layout should be shown when in desktop mode.
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="padding: 10px 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="2" style="padding: 10px 10px 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="border-collapse: collapse;background: #FFFFFF;border-radius: 10px;">
<tr>
<td height="45" style="padding: 65px 45px;">
<div class="hide-for-small">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-top: 40px">
<tr style="height: 60px">
<td style="vertical-align:top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top; width: 45%;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
text
</span>
</td>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top;">
<div style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</div>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif;">
text
</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top; width: 45%;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
text
</span>
</td>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif;">
text
</span>
</td>
</tr>
</table>
</div>
<div class="hide-for-large">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-top: 40px">
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
stacking elements start
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I made an email signature in HTML. I have written my HTML email signature and see it in Google Chrome. The problem is, as soon as I copied it to Outlook, my HTML Email signature shows some white gap between its row. I tried everything but I can't get rid of it. White space is only showing in Ms Outlook, but not in Google Chrome, Gmail, etc. Can anyone help me? Code below. See screenshot of the email signature
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="bottom" style="padding-left:10px; padding-bottom:15px; line-height:20px">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:28px; font-size: 25px;color:#000; ">
<strong style="color: #C40F10">Amy Strom</strong>
</td>
</tr>
<tr>
<td valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;color:#393934; ">
Property Manager
</td>
</tr>
<tr>
<td valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;color: #393934;">
P: (08) 9494 2606
</td>
</tr>
<tr>
<td valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;">
E: pm3#semplepg.com.au
</td>
</tr>
<tr>
<td valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;">
1/752 North Lake Road, South Lake WA 6164
</td>
</tr>
<tr>
<td valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;">
www.semplepg.com.au
</td>
</tr>
</table>
</td>
<td valign="top" style="padding: 2px 0 0 20px; text-align:center;" valign="bottom">
<a href="https://www.semplepg.com.au/">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/6177c1e3331ea605e1a4d562_AmyStrom.jpg" alt="Amy's photo from Semple Property" width="250" style="width:250;font-family: sans-serif; color: #ffffff; display: block; border: 0px;">
</a>
</td>
</tr>
<tr>
<td valign="top" style="background-color:#3C3C3B; padding: 5px 20px 5px 10px; font-size:0px; line-height:0; text-align:left; ">
<a href="mailto:semple#semplepg.com.au" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d5150d56c5f0bb75b_mail.png" alt= "email icon" height="35" style="height: 35px;">
</a>
<a href="https://au.linkedin.com/company/semplepropertygroup" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61ead014f5bfb8600fe_linkedin.png" alt= "Linkedin icon" height="35" style="height: 35px;">
</a>
<a href="https://www.youtube.com/channel/UCgSovBlmEFHzyXx-bW9vEbw" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d4f490af276680554_youtube.png" alt= "Youtube icon" height="35" style="height: 35px;">
</a>
<a href="https://www.facebook.com/semplepropertygroup" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d541a51c3b0433623_fb.png" alt= "Facebook icon" height="35" style="height: 35px;">
</a>
<a href="https://www.instagram.com/semple_property_group/" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61e0a63f40c878b6465_instagram.png" alt= "Instagram icon" height="35" style="height: 35px;">
</a>
<a href="https://goo.gl/maps/jWt8je8pFnN8Vi2m8" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d32add34ce0116798_location.png" alt= "Location icon" height="35" style="height: 35px;">
</a>
</td>
<td valign="top" style="background-color:#3C3C3B; padding: 5px 20px 5px 12px; text-align:right; ">
<a href="https://www.ratemyagent.com.au/real-estate-agency/semple-property-group-ao219/sales/reviews" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;">
<img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/61554ae7255348ced3b9293a_rate.png" alt= "Location icon" height="35" style="height: 35px;">
</a>
</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;
I'm trying to update HTML column in SQL Server, but I came across the following error and I don't seem to be able to resolve it. The error:
Msg 102, Level 15, State 1, Line 1 Incorrect syntax near
'Trebuchet'.
I have tried using single and double quotes around the HTML, but none worked.
update SC_EmailTemplates set HTML = '<p> </p> <center> <table style="text-align: left;" width="600" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <!--GREEN STRIPE--> <tr> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF;" bgcolor="#673090" width="31" height="113"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <!--WHITE TEXT AREA--> <td style="border-top: 1px solid #FFF; text-align: center;" valign="middle" bgcolor="#FFFFFF" width="131" height="113"><span style="font-size: 25px; font-family: Trebuchet MS, Verdana, Arial; color: #673090;">Hello!</span></td> <!--GREEN TEXT AREA--> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; padding-left: 15px;" bgcolor="#673090" height="113"><span style="color: #ffffff; font-size: 18px; font-family: Trebuchet MS, Verdana, Arial;">A quick email from Abcd. </span></td> </tr> <!--DOUBLE BORDERS BOTTOM--> <tr> <td style="border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;" width="31" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-top: 0px solid #e4e4e4; border-bottom: 0px solid #e4e4e4;" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td colspan="3"><!--CONTENT STARTS HERE--> <br /> <br /> <table width="598" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="15"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="padding-right: 10px; font-family: Trebuchet MS, Verdana, Arial; font-size: 12px;" valign="top" width="598"><span style="font-family: Trebuchet MS, Verdana, Arial; font-size: 17px; font-weight: bold;">Dear [Cr_Clients.NameFirst]</span> <br /> <p>[Message]</p> </td> </tr> </tbody> </table> <br /> <table style="border-top: 0px solid #e4e4e4; text-align: center; font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 586px;" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 0px solid #e4e4e4; width: 589px;" colspan="3" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3">Unsubscribe</td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3"> <p>company address 123456798 asdf</p> </td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 123.5px;"> <p><img src="https://img.icons8.com/color/48/000000/twitter.png" alt="Follow us on Twitter" width="60" height="48" /></p> <p> Follow us on Twitter</p> </td> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 347.5px;"> <p><img src="http://abcd.org.uk/assets/images/logo.jpg" alt="Workabout" width="190" height="58" longdesc="http://www.workabout.org.uk" /></p> <p> </p> </td> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 118px;"> <p><img src="https://img.icons8.com/color/48/000000/facebook.png" alt="Find us on Facebook" width="60" height="62" /></p> <p>Find us on Facebook</p> </td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; background: #673090; width: 589px;" colspan="3"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center>'
where ID =57;
When using single quotes, you have to double the up (escape them) in your literal string.So for a value like "don't", you would have 'don''t'.
UPDATE SC_EmailTemplates
SET HTML = '<p> </p> <center> <TABLE style="text-align: left;" width="600" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <!--GREEN STRIPE--> <tr> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF;" bgcolor="#673090" width="31" height="113"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <!--WHITE TEXT AREA--> <td style="border-top: 1px solid #FFF; text-align: center;" valign="middle" bgcolor="#FFFFFF" width="131" height="113"><span style="font-size: 25px; font-family: Trebuchet MS, Verdana, Arial; color: #673090;">Hello!</span></td> <!--GREEN TEXT AREA--> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; padding-left: 15px;" bgcolor="#673090" height="113"><span style="color: #ffffff; font-size: 18px; font-family: Trebuchet MS, Verdana, Arial;">A quick email from Abcd. </span></td> </tr> <!--DOUBLE BORDERS BOTTOM--> <tr> <td style="border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;" width="31" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-top: 0px solid #e4e4e4; border-bottom: 0px solid #e4e4e4;" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td colspan="3"><!--CONTENT STARTS HERE--> <br /> <br /> <table width="598" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="15"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="padding-right: 10px; font-family: Trebuchet MS, Verdana, Arial; font-size: 12px;" valign="top" width="598"><span style="font-family: Trebuchet MS, Verdana, Arial; font-size: 17px; font-weight: bold;">Dear [Cr_Clients.NameFirst]</span> <br /> <p>[Message]</p> </td> </tr> </tbody> </table> <br /> <table style="border-top: 0px solid #e4e4e4; text-align: center; font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 586px;" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 0px solid #e4e4e4; width: 589px;" colspan="3" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3">Unsubscribe</td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3"> <p>company address 123456798 asdf</p> </td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 123.5px;"> <p><img src="https://img.icons8.com/color/48/000000/twitter.png" alt="Follow us on Twitter" width="60" height="48" /></p> <p> Follow us on Twitter</p> </td> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 347.5px;"> <p><img src="http://abcd.org.uk/assets/images/logo.jpg" alt="Workabout" width="190" height="58" longdesc="http://www.workabout.org.uk" /></p> <p> </p> </td> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 118px;"> <p><img src="https://img.icons8.com/color/48/000000/facebook.png" alt="Find us on Facebook" width="60" height="62" /></p> <p>Find us on Facebook</p> </td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; background: #673090; width: 589px;" colspan="3"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center>'
WHERE ID = 57;
The reason this was so hard for you to fix though is because you don't have a single line break in your HTML. Good use of white space and line breaks is paramount in every language. Just like grammar is paramount in spoken language. Without it, all you have is an unreadable mess.
For our company I'm creating emailsignatures (using an html code in Cloudpages for work), it works perfectly fine in gmail & Apple mail, but when you open an email in Outlook (send from Gmail in browser or Apple mail) blue lines appear around the picture.
How can I remove those blue lines?
printscreen blue lines
<!-- [if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p> </p>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly;" valign="bottom">$!photoUrl$!photoUrl<img src="$!photoUrl" alt="Foto" width="132" height="160" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<table style="width: 275px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;" align="left" valign="top" width="140">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"><span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important; color: #000001;"> <span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"> <!-- START NAAM --> <strong style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$personalName $personalSurname</strong><br /><em style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$orgJobTitle</em><br /><br /> <!-- EINDE NAAM --> </span> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 107px;" align="left" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/logo-vka.gif" alt="Logo VKA" width="107" height="54" /></td>
</tr>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;"><span style="text-decoration: none; color: #000001;"> <!-- START TELEFOON --> #if ($phoneMobile !="")<span style="color: #000001 !important;"><span style="color: #000001;">M $phoneMobile</span></span>#end <br /><span style="color: #000001 !important;"><span style="color: #000001;">T +31 79 368 10 00</span></span><br /> <a style="color: #000001 !important;" href="https://www.vka.nl/?utm_source=emailhandtekening" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">www.vka.nl</span></span></a> <!-- EINDE TELEFOON --> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 70px;" align="left" valign="bottom"><!-- START SOCIAL MEDIA -->
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 34px;"><a title="LinkedIn" href="$!linkedin"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-linkedin.gif" alt="LinkedIn" width="34" height="28" border="0" /></a></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 73px;"><a title="Twitter" href="$!twitter"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-twitter.gif" alt="Twitter" width="34" height="28" border="0" /></a></td>
</tr>
</tbody>
</table>
<!-- EINDE SOCIAL MEDIA --></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0; height: 18px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="18" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0; height: 32px;" align="left">
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0px; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="top" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-boven.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td class="gelebalk" style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; text-align: center; padding: 0;" align="center"><!-- START LINK -->
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; font-weight: bold;"><a style="text-decoration: underline; color: #000001 !important;" href="https://www.vka.nl/privacy-podcast/?utm_source=emailhandtekening&utm_medium=vka" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">Ontdek onze Privacy Podcast in iTunes</span></span></a></p>
<!-- EINDE LINK --></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; width: 8px; background-color: #f6db30; padding: 0;" align="left" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="bottom" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-onder.gif" alt="" width="8" height="8" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="color: #ffffff;"><br /><br />.</p>
You're not seeing blue lines, I think you're seeing tiny blue text. What you're seeing is a very tiny version of this: $!photoUrl$!photoUrl. I think Outlook is ignoring the font-size:0; and possibly not processing the second URL you are adding to your code before the image.
You didn't post all of your code, but what you did post has a few issues. You didn't close the table, you didn't close the href you started before the image.
To make your table function better in Outlook, I added a few style classes that help make Outlook display a table in a better manner: border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;.
I added a style attribute display: block; which helps Outlook better display an image.
Try this code instead:
<!-- [if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p> </p>
<table border="0" width="400" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="font-size: 0; mso-line-height-rule: exactly; line-height: 0 !important; border-collapse: collapse;" valign="bottom">
<a href="$!photoUrl" target="_blank">
<img src="$!photoUrl" alt="Foto" width="132" height="160" border="0" style="display: block;" />
</a>
</td>
</tr>
</tbody>
</table>
Let me know the results.
Good luck.
I managed to get rid of the blue line by adding text-decoration:none in the parent element.
Before:
<p>
<img src="..." />
<p>
After
<p style="text-decoration:none;">
<img src="..." />
</p>