HTML email newbie here. Cannot believe how hard a simple thing can be in this arena...
I need a left-aligned, 1 pixel high, 350 pixels wide, colored line that I can put between lines of text in an HTML email.
Something like <hr align="left" style="height: 1px; width: 350px; color: #ff0000;" /> but of course that doesn't work in various versions of Outlook (I need to support 2003+) and Entourage (I need to support 2004+). (Other clients aren't giving me the same sort of grief, of course.)
Actual <hr>s are apparently untweakable in Entourage, so I've tried all sorts of things, including 1px high <p>s with a background color. Everything I try breaks somewhere.
Anyone have a bulletproof way to produce this simple line w/o resorting to an image?
There is no way around not using an image for this.
What you need to do is add a spacer image and a background color.
Im not sure how you have your email laid out, but if this was for me i would do something like this:
http://jsfiddle.net/ZsCwX/
<table cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="1px" width="350px" style="background-color:#F00;"><img src="image/spacer.gif" alt="" width="350" height="1" style="display:block" border="0" /></td>
<td height="1px" width="250px"><img src="image/spacer.gif" alt="" width="250" height="1" style="display:block" border="0" /></td>
</tr>
</table>
Try this:
<tr>
<td style="padding-top:30px;padding-bottom:30px;">
<table border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<td align="left" bgcolor="#ff0000" style="font-size: 1px; line-height:1px; color:#ff0000"></td>
</tbody>
</table>
</td>
</tr>
Related
Can anybody provide me with the code for this design? in the email template, I need to make this design. Text can be changed dynamically.
Email clients usually have poor support for properties like position or negative margin values. See:
Can I email… position
Can I email… margin
However, there’s a popular technique among email developers called “Faux absolute position”. The idea is to use max-height in a parent element to limit the space taken by children element in the flow. You can then position children element using positive margin values or text-align. You can read this article about it.
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;"><tr><td>
<![endif]-->
<div style="max-width:530px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;">
<tr>
<td style="padding:0 20px 20px; border:1px solid #eee;">
<div style="max-height:17px;">
<div style="margin:0 20px; padding:5px 20px; background:#fc2d6a; border-radius:5px;">
<p style="margin:0; color:#fff; font:16px/1.5 sans-serif; text-align:center;">
You’ve been referred!!!
</p>
</div>
</div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr>
<td style="padding:20px; border:2px dashed #fc2d6a;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
This wouldn't work as it is in Outlook on Windows and you’d need to add a VML fallback version.
I'm developing a section for an e-mail with an pattern background and an image overlapping the pattern, and I got it working:
It loads okay in all e-mail clients, but outlook (as usual) renders the PATTERN (blue image) in different ways every time you open the e-mail:
Loads entire pattern
Loads part of it, and after a few seconds load everything
Takes a lot of time to load
Does not load the pattern at all
If you try to forward the e-mail and discard the forwarding, the pattern loads in the original e-mail
The other front image loads normally, probably because it's an img tag.
I can't give up on v:fill because I need the overlap. That's how the code is now:
<table border="0" cellpadding="0" cellspacing="0" wi dth="100%">
<tbody>
<tr>
<td
background="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png"
height="339px"
style="background-size: 113px 339px;
background-repeat: no-repeat;"
valign="top">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="t" stroked="false" stroke="false" width="316" height="339" style="width:316px;height:339px;">
<v:fill src="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png" origin="-0.5,-0.5" position="-0.5,-0.5" size="84pt,254pt" sizes="84pt,254pt" type="frame" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%">
<tbody>
<tr>
<td style="padding: 46px 0 0 60px;"><img class="main-image" height="248" src="https://a.cdn-hotels.com/gdcs/production169/d636/03254867-7781-42d4-84f3-aca7aed4bdaa.jpg" style="width: 256px; height: 248px; object-fit: cover;" width="256"></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Tried changing the url where images are stored, and basically guessing where the problem is because I don't even know why there is a problem in the first place.
I expected the pattern to load the same way the front image loads.
I've seen this happen more than once, and I really don’t know what’s going on. Another thing that did trigger the image load for me was resizing the window or opening the email in its own window. This looks like an Outlook/Word engine bug. And I don't think there's a proper solution for it.
One thing I did when this happen though is change VML used. Instead of using a <v:rect> with a fill and a textbox, I've used a <v:image> instead. Based on your code it would look something like this:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td
background="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png"
height="339px"
style="background-size:113px 339px;
background-repeat:no-repeat;"
valign="top">
<!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="position:absolute; width:113px; height:339px; top:0; left:0; z-index:1;" src="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" style="position:absolute; width:316px; height:339px; top:0; left:0; z-index:2;">
<![endif]-->
<table width="100%">
<tr>
<td style="padding:46px 0 0 60px;"><img class="main-image" height="248" src="https://a.cdn-hotels.com/gdcs/production169/d636/03254867-7781-42d4-84f3-aca7aed4bdaa.jpg" style="width:256px; height:248px; object-fit:cover;" width="256"></td>
</tr>
</table>
<!--[if mso]>
</v:shape>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Here’s a test in Email on Acid in The Outlooks on Windows.
I learnt this from an old post from 2011 (unfortunately no longer available but visible on archive.org).
So we have a url that is pulled in dynamically from a lookup Data Extension(Data Table). It is structured like this: https://www.clientsite.com/on-boarding/#anchorlocation. However, when we test send the email and click the link we go to the page but the anchor does not take you to the linked anchor location. Come to find out after investigating that once we removed the tracking parameters from the end of the url it worked just as intended because it was the original url. However, we need the tracking so removing the tracking is not an option. So, what is the issue? Here is an example of the code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center">
<a alias="%%=v(#Alias)=%%" href="%%=RedirectTo(#URL)=%%" target="_blank"><img alt="" border="0" src="%%=v(#VideoImage)=%%" style="display:block;" title="" width="100%" /></a></td>
</tr>
</table>
Here is an example of the url once the email was sent. This link would go to the page but not to the anchored section of the page:
https://www.clientsite.com/on-boarding/#anchorlocation?utm_source=Onboarding&utm_medium=email&utm_term=Card%20Ship&utm_content=AliasName&utm_campaign=Onboarding_Card_Ship
So, after some time I did find out what is going on and how to fix it. It appears that the anchor name must be at the end of the url. So it should look like this:
https://www.clientsite.com/on-boarding/?utm_source=Onboarding&utm_medium=email&utm_term=Card%20Ship&utm_content=AliasName&utm_campaign=Onboarding_Card_Ship#anchorlocation
Here is how I accomplished that with our dynamic content. I know what the tracking parameters are and where the data comes from to populate them. So I simply had to use the Ampscript Concat function to rearrange the url. Here is an example of that code:
%%[
/* This is pulled from the DE or Data Table */
Set #URL = '#anchorlocation'
/* This resets the variable to the rearranged url */
Set #URL = Concat('https://www.clientsite.com/on-boarding/?utm_source=',__AdditionalEmailAttribute1,'&utm_medium=email&utm_term=',__AdditionalEmailAttribute2,'&utm_content=Alias&utm_campaign=',emailname_,#URL) ]%%
Then when I call the variable in the code I need to concat the html for the anchor and image tags so that the tracking will not be put on it a second time. That code looks like this:
%%=concat('<a alias="',#Alias,'" href="',#URL,'" target="_blank"><img alt="" border="0" src="',#Image,'" style="display:block;" title="" width="100%" /></a>')=%%
Put that together and the entire code looks like this:
%%[ Set #URL = Concat('https://www.clientsite.com/on-boarding/?utm_source=',__AdditionalEmailAttribute1,'&utm_medium=email&utm_term=',__AdditionalEmailAttribute2,'&utm_content=Video_Alias&utm_campaign=',emailname_,#URL) ]%%<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#E8E8E8">
<tr>
<td style="line-height:1px; font-size:1px;" height="1" bgcolor="#DEDEDE"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#E8E8E8" align="left">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center">%%=concat('<a alias="',#Alias,'" href="',#URL,'" target="_blank"><img alt="" border="0" src="',#Image,'" style="display:block;" title="" width="100%" /></a>')=%%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="1" bgcolor="#DEDEDE"> </td>
</tr>
</table>
My Laravel Web App regularly sends out notifications about system changes via Mandrill.
Unfortunately, all mails sent by Mandrill are moved to my spam-box with the message:
[Caution: Message contains Redirect URL content]
Question 1:
What is this message about? I think it's because my server sets the sender-address to "noreply#domain.com"
Question 2:
Is there any possibility to prevent that? Maybe there are just some additional configs needed.
Additional Informations:
The receiving mail-server is based in my company. Mails are checked through the Symantec Messaging Gateway. The description from Symantec is:
Redirect URLs include free hosting sites, URL shortening services, and
URL redirecting services which can potentially be abused to deliver
spam or malware payloads. Symantec Messaging Gateway can filter
against email messages that contain one or more redirect URLs.
My email-program is MS Outlook 2010
Here is also the html-template of the mail I want to send:
<body bgcolor="#f7f7f7">
<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%">
<tr>
<td align="left" valign="top" width="100%" style="background:repeat-x url(##obfuscated##) #ffffff;">
<center>
<img src="##obfuscated##" class="force-width-gmail">
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="##obfuscated##" style="background-color:transparent">
<tr>
<td width="100%" height="80" valign="top" style="text-align: center; vertical-align:middle;">
<center>
<table cellpadding="0" cellspacing="0" width="600" class="w320">
<tr>
<td class="pull-left mobile-header-padding-left" style="vertical-align: middle;">
<img width="167" height="35" src="##obfuscated##" alt="logo">
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #f7f7f7;" class="content-padding">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td class="header-lg">
Hallo {{$name}}!
</td>
</tr>
<tr>
<td class="free-text">
Just a text
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #ffffff; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;">
<center>
<table cellpadding="0" cellspacing="0" width="600" class="w320">
<tr>
<td class="content-padding">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="header-md">
Just a text
<!-- something like:
<tr><td style="padding: 10px 10px 10px 0px;text-align: left;">'.$offline_posting->link.'</td><td style="padding: 10px 30px 10px 0px;">'.$offline_posting->job_id.'</td><td style="padding: 10px 0px 10px 0px;color: red;">offline</td></tr> -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 75px;">
<table>
{{$postingslist}}
</table>
</td>
</tr>
<tr>
<td class="button">
<div><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://188.166.43.201/" style="height:45px;v-text-anchor:middle;width:155px;" strokecolor="#ffffff" fillcolor="#73479c">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">check changes</center>
</v:rect>
<![endif]--><a class="button-mobile" href="http://188.166.43.201/"
style="background-color:#73479c;color:#ffffff;display:inline-block;font-family:'Cabin', Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;line-height:45px;text-align:center;text-decoration:none;width:155px;-webkit-text-size-adjust:none;mso-hide:all;">check changes</a></div>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #f7f7f7; height: 100px;">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td style="padding: 25px 0 25px">
<strong>Heading</strong><br />
Coding by Me<br />
© 2015 some company<br /><br />
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
It's going to depend on your receiving mail server why it's appending that message or noting that - since the message says something about redirect URL content, then you'll want to look at the URLs in the message - but that's just a guess - we'd need to know what spam filter or mail program you're using since they're all going to work a bit differently.
Some spam filters flag emails that contain tracking URLs, but not all. Others flag content when the text in the email looks like it's pointing to Site A, but the HTML actually points the link to Site B (ie, something designed to make you think you're really going to Paypal but that points you to a phishing site).
Here's an example. If you're sending something like this to Mandrill for processing:
example.com
When Mandrill's tracking link gets applied, it'll appear in the email like the below, which looks phishy since it looks like you're being directed to example.com but in reality are going to a Mandrill/tracked link first:
example.com
To address this, make sure the text that appears isn't a URL. So send something like this:
Click here to go to my site
The above is mostly educated guess based on the message being displayed in your mail program - again, it's going to vary, so knowing more about that is/would be helpful.
Finally found the solution for myself:
On the first hand, it was indeed the button "check changes", which declarated the Mail as fishing-mail, but didn't help with the prefix [Caution: Message contains Redirect URL content]
This was caused of the fact that I was sending an entire HTML-document including
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Removing the according lines solved the problem.
Thanks to all!
I may be missing something obvious but for some reason Outlook.com is overriding the margin and line-height for the P tag it conveniently wraps all images in. Any solutions to remove this unwanted space at the bottom?
<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
<tr>
<td valign="top" align="left" width="196" height="45">
<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
<tr>
<td style="font-size:0;line-height:0;border-collapse:collapse;border-bottom:1px solid #BBBBBB;padding:0;border-collapse:collapse;background:red;" valign="top" align="left" width="196">
<a href="" style="font-size:0;line-height:0;" target="_blank">
<img style="width:137px;height:44px;display:block;" src="" width="137" height="44" alt=""/></a>
</td>
</tr>
</table>
</td>
</tr></table>
put this in your header style tag:
p {margin: 1em 0;}
As the p tags are inserted at rendertime, you need to overwrite it in the style tag.
Composing e-mails in Outlook is a pain...I managed to get rid of the extra space between images by putting style="border-collapse:collapse; line-height:0;" in the TD tag and explicitly setting all width and height. And Don't forget to put style="display:block;" in your IMG tags to cover all clients.
<td width="400" height="100" style="border-collapse:collapse;line-height:0;"><img src="myimage.jpg" width="400" height="100" style="display:block; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;"></td>
You have to put the following into the head style part:
img {
line-height:100%;
}
Actually, outlook.com converts it into the following, but it will work!
.ExternalClass img {
line-height: 100%;
}
We use this solution at app.edmdesigner.com for images, and it works perfectly.