I Have coded an HTML email signature for outlook, it loads alright in my Compose window, but once sent, images won't load on recipient mail. I've been strugggling to show background images and I've finally accomplished to show them, in fact, they're the only ones showing, but the inserted images won't show.
Here's my code:
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- BEGIN : CTA / Background image -->
<!--[if gte mso 9]>
<img src="https://sigurat.mx/firmas/bg_01.jpg" alt="" border="0" width="550" height="200" style="display:block;" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:550; height:200; position:absolute; top:0; left:0; border: 0; z-index: 2">
<v:fill color="#ffffff" opacity="0%" style="z-index: 1;" />
<div>
<![endif]-->
<!-- Containing Table START-->
<table border="0" cellspacing="0" cellpadding="0" style="background-image: url(https://sigurat.mx/firmas/bg_01.jpg); background-repeat: no-repeat; background-position: left bottom;">
<tbody>
<tr>
<td width="170px" style="text-align: center;">
<img src="https://sigurat.mx/firmas/qr-01.png" width="150" height="150" alt=""/>
</td>
<td width="220px" style="margin-left: 20px;">
<p style="font-family: 'Open Sans', sans-serif; font-weight: 700; color:#65656A; font-size: 14px; ">
Name<br><span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#96C93D; font-size: 12px;">Directora y Agente Titular</span>
</p>
<p> </p>
<p style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#65656A; font-size: 12px;">
<img src="https://sigurat.mx/firmas/tel-01.png" width="12" height="12" alt=""/> (55) <span style="font-weight: 700;">123405789</span><br>
<img src="https://sigurat.mx/firmas/cel-01.png" width="12" height="12" alt=""/> (55) <span style="font-weight: 700;">1234 5678</span><br>
<img src="https://sigurat.mx/firmas/mail-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> mail</span>#mail.mx<br>
<img src="https://sigurat.mx/firmas/web-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> sigurat</span>.mx</p></td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="padding-top:6px;">
<td style="text-align:left;">
<img src="https://sigurat.mx/firmas/yt.png" width="12" height="12" alt=""/> <img src="https://sigurat.mx/firmas/fb.png" width="12" height="12" alt=""/> <img src="https://sigurat.mx/firmas/in.png" width="12" height="12" alt=""/> <span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#FFFFFF; font-size: 12px;">Escanea el QR y guarda mis datos en tu celular.</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->
<!-- END : CTA / Background image -->
</body>
</html>
And this is how it renders on recipients mail once sent:
Background images load perfectly, but all other inserted images are bieng blocked by Microsoft.
Any help would be great. Thanks in advance.
The background-image attribute is not supported in Word. It acts as an email editor so you need to follow the rules applied in Word. You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
Ideally, I'd recommend attaching images as embedded images and then using them in the message body using the cid prefix. That is because Outlook may block internet based images (referenced by URLs) by default. For example, you could attach an images and use the following construction in the message to refer to the attached image:
<IMG src="cid:Communications.jpg" width=200>
See Embedding image in email with VBA for more information.
Outlook blocks all external images by default. The recipient (but not the sender) can enable external images on the per-message basis, but if your message is going out to the recipients outside of your control, the only way to show an image is to add its as an attachment and refer to it by its content id in the <img> tags in the HTML body. See Including Pictures in an Outlook Email .
Related
I use this code to display a animated webp in a HTML5 email. The image is playing in Outlook but not in Gmail. Size is 600x338px. Weight is around 15 Mo and duration is 15 secs. Is it a matter of weight?
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;border:none;max-width:600px;">
<tr align="center">
<td>
<div style="text-align:center;background-image:url('GIF/LINK');background-size:20%;background-repeat:no-repeat;background-position:center center;margin:0 auto;position:relative;height:0;max-height:0;padding-bottom:56.33%;">
<a href="WEBP/LINK" style="border:none;">
<!--[if !mso]><!-- --> <img style="width:100%;border:none;max-width:600px;" src="WEBP/LINK" alt="VIDEO"> <!--<![endif]-->
<!--[if lte mso 16]> <img alt="VIDEO" border="0" src="VIDEO/LINK" style="border:none;width:0px;max-height:0px;height:0px;overflow:hidden;text-align:center;" width="600" height="338"/> <![endif]-->
</a>
</div>
</td>
</tr>
</table>
Gmail does not support webp animation; it converts the file to jpg: https://www.caniemail.com/features/image-webp/
This is the first html email signature I''ve created and I've now discovered why I dont do them - what a pain!
It seems no matter what I do, it's not displaying correctly in one client or another.
The code I used below is displaying correctly in Android and Mac Outlook clients, however when I first upload it to outlook there is a table wrap error that I corrected by changing the table in outlook to nowrap. But now when this email signature is sent from outlook, it breaks when you look at it on ios.
I know my code probably isnt very good as it's my first time doing these. Could anybody please give me a hand to fix it??
Help me StackOverflow, you're my only hope!
Here is my code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<STYLE>
<!--
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
-->
<!--
<style>
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
</STYLE>
<tr>
<td width="0" bgcolor="#f3f3f1">
</td>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</a>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
<a href="tel:000000000" style="text-decoration: none;color:#000000">Call the office.
<a href="tel:000000000" style="text-decoration: none; color: #000000">Call Me.
<a href="mailto:email#domain.com.au" style="text-decoration: none;color: #000000;font-size: 9px; white-space: nowrap">Email me.
<br />
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
</a>
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif; class="gold">
villagerproperty.com.au
</a>
</p>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png">
<br> <p bgcolour= "ffffff">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p> <br>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
<tr>
<td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
Thankyou #Nathan for all of your help!
Your fix worked great, however when viewing on iOswrapping error
Is this because I have the table width set at a % instead of a fixed px?
I aplogise for all the questions - I'm very new to html signatures and I seem to be having a lot of trouble!
A couple of helpful's for future:
Run your HTML through a w3c HTML validation check (and CSS, but that's less useful). There were quite a few tiny but significant errors: not closing </a> in the right place (it's inline, so close it before a block element like <p> or <br>), or not closing stuff, or forgetting quotes.
If you use https://validator.w3.org/#validate_by_input ignore all the obsolete messages (message filtering button can turn them off) - email is too old school for it!
And seriously, that was all, apart from removing a couple of redundant/empty td's/tables.
There is a possibility Outlook from Windows was messing with your code, it does that. But Outlook from Mac should be no problem.
Here is working code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<style>
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
<tr>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
Call the office.
Call Me.
Email me.
</p>
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif;" class="gold">
villagerproperty.com.au
</a>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png" alt="" role="presentation">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p>
</td>
</tr>
</table>
I have an Angular application. In a component HTML page, I am displaying flags and times of different places against a colored background. I am not being able to change the background color of the iframe. Tried suggestions at
Change background color of iframe issue and some other sources
Here is the sample HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet" />
<table cellspacing="0" style="font: normal 11pt Verdana; float:left; margin-top:-60px;
margin-bottom:150px;">
<tr>
<td style="text-align: center; padding: 0px 4px;">
<span class="flag-icon flag-icon-us"></span>
<br />
<span style="color:whitesmoke; font-size:11px;font-weight:200;">Los Angeles</span><br />
<iframe allowtransparency="true" style="background-color:inherit;" src="http://free.timeanddate.com/clock/i2jzaeez/n155/fn17/fs9/fc999/th1/ts1"
frameborder="0" width="34" height="14"></iframe>
</td>
<td style="text-align: center; padding: 0px 4px;">
<span class="flag-icon flag-icon-mx"></span>
<br />
<span style="color:whitesmoke;font-size:11px;font-weight:200;">Mexico City</span><br />
<iframe src="http://free.timeanddate.com/clock/i2jzaeez/n155/fn17/fs9/fc999/th1/ts1" frameborder="0" width="34" height="14"></iframe>
</td>
</tr>
</table>
And here is the image. Please guide
Using iframe settings did not work. However, I was able to conveniently make adjustments on their website and use the HTML generated:
https://www.timeanddate.com/clocks/free.html
I'm trying to unify the font to appear the same on all operating systems and devices. Also some design elements break on different devices. what am I doing wrong? this is my code below?
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td rowspan="4" border="0" cellpadding="0" cellspacing="0" height="100" width="250">
<img src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/West-Coast-Elevators-Email-Signature-Image.jpg" alt="west coast elevators logo" width="350px" height="150" style=" margin-top: 28px">
</td>
<td colspan="4" height="20" width="200px"><p style="font-size:20px; margin-bottom: 5px; line-height: 20px; font-family: 'sans-serif', 'lato';"><strong>Full Name</strong><br>
<span style="font-size: 15px; font-family: 'sans-serif', 'lato'; color: #000000;">Managing Director</span></p></td>
</tr>
<tr height="10px" width="200px">
<td colspan="1" width="120px"><p style="margin-bottom: -0px; font-size: 15px">0000 000 000</p></td>
<td colspan="2" width="80px"><p style="margin-bottom: -0px;font-size: 15px">08 6263 5253</p></td>
</tr>
<tr>
<td height="47" colspan="3" width="220px"><p style="line-height: 0px; margin-top: 0px; font-family: 'sans-serif', 'lato';font-size: 15px">20 Wynyard St, Belmont WA 6104</p>
<p style="text-decoration: none; line-height: 10px; font-family: 'sans-serif', 'lato'; font-size: 15px">westcoastelevators.com.au </p></td>
<td width="180" ><img style="margin-right: 5px; margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-3.png" alt="facebook logo"> <img style="margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-4.png" alt="instagram logo"></td></tr>
</tbody>
</table>
This is a great tool for cross-browser/platform font issue: https://google-webfonts-helper.herokuapp.com/fonts/ try to download font from here and then import it in the css file.
To make the font constant everywhere, you would have to use a web font as Mr. Lister has said.
You could get fonts from all over the internet, but for now, getting fonts from here would be best.
An example, after selecting your font, you would import it into your HTML or CSS.
For HTML:
<body>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</body>
or
<style>
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
</style>
For CSS:
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
Then to use it in your code (Note: This is how I would do it, after seeing what you are trying to do in your code):
<style>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
.p {
font-family: "Lato", sans-serif;
}
<!-- You will have to remove the font-family styling from all the tags though then leave this style tag in. -->
</style>
However, I strongly advise you look into external CSS. It would make your code much easier to work with.
Im been trying to make my page work on different browsers and its seems it only works on IE and in other browser all my images are misalign. im not really good at HTML and its been awhile since the last time I use html, please check my codes below. And i need my page to be 640 x 480 px. Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AD</title>
</head>
<body>
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<div style="{z-index:3;}">
<img src="images/Header.gif" width="640" height="110"
/div>
<div style="{position: absolute; top: 145; left: 310; z-index:3;} font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#000000;">at</div>
<div style="{position: absolute; top: 115; right: 185; z-index:3;}">
<img src="images/Brush.gif" width="100" height="215"
</div>
<div style="{position: absolute; top: 20; right: 145; z-index:3;}">
<img src="images/LOGO.gif" width="330" height="85"
</div>
<tr>
<td align="center" valign="top" bgcolor="#f0f8ff" style="background-color:#f0f8ff; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000000; padding:8px;"><table width="80%" border="0" cellspacing="0" cellpadding="0" style="margin-top:10px;">
<center> text 1 <br><b>Competitive text2
<br>text3</b>
<br></center></div></td>
<br>
<center> <div style="font-size=20px;"> text4
<br>text5K.<br>
</center></div>
<br>
</tr>
</table></td>
</tr>
<tr>
<tr>
<tr>
<td align="left" valign="top" bgcolor="#00000" style="background-color:#00000;"><table width="100%" border="0" cellspacing="0" cellpadding="7">
<tr>
<td align="left" valign="top" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:16px;"> <center><b>Apply online today at <font color=#6699ff> www.startek.com/careers</font></b>
</td>
<tr>
<td align="center" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:13px;"> <center>address
<br><b>tel.no.</b>
</td>
</tr>
</table></td>
</tr>
</body>
</html>
Make use of CSS layout elements such as position. Your code just works on some browsers because some formatting is not cross browser compatible.
I advise you to use CSS for formatting because some of the HTML formatting you use are already deprecated. Here is a nice CSS tutorial
The same problem was also with me...Since HTML output may vary depending upon the browser, you should use adobe dreamweaver.It has a functionality to output HTML same in all browser by default...by the way..how it does i don't know.
If you can't afford dreamweaver right now..make sure you include position attribute in
div tag properly.
try like this:
<div position=absolute>main panel</div>