Not sure why this is happening. The footer text completely disappears in Outlook/Windows email testing. All other email clients work and, the footer appears, as it should.
Here is the template with the footer code. Did I miss closing a table or? Any suggestions? So odd-thanks for looking.
```
`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="darkmode-footer" bgcolor="#122147" style="padding: 50px 15px;">
<table role="presentation" class="w100p" cellpadding="0" cellspacing="0" border="0" style="width: 600px; max-width: 600px;">
<tr>
<td align="center"><a href="" target="_blank"><!--[if !mso]><! -->
<div style="text-align: center;">
<br>
<span style="font-size:10px;"><span style="color:#ffffff;">You are receiving this email because you are a valued friend of the .<br>
Please note that your personal information is kept private and is never shared with other organizations.<br>
<br>
Want to change how you receive these emails?<br>
You can </span></span><span style="color:#ffffff; font-size:10px; text-decoration: underline;">change your subscription preferences here</span><span style="color:#ffffff; font-size:10px;">.<br>
View this email in a browser.<br>
<span style="color: #122147;">%%[ if 0 == 1 then ]%% %%Member_Busname%% %%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%% %%Member_Country%% %%[ endif ]%%</span></span></div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
If you put the code which you posted into a snippet here (as I did) and in the editor click "Tidy" to properly format it, you will notice a non-fitting </td>in the 9th-to-last line, and also these superfluous closing tags in the last three lines:
</td>
</tr>
</table>
The snippet's browser emulator obviously is tolerant in fixing these errors, but I can imagine that especially mail applications like Outlook won't be that tolerant and treat this in another way.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="darkmode-footer" bgcolor="#122147" style="padding: 50px 15px;">
<table role="presentation" class="w100p" cellpadding="0" cellspacing="0" border="0" style="width: 600px; max-width: 600px;">
<tr>
<td align="center"><a href="" target="_blank"><!--[if !mso]><! -->
<div style="text-align: center;">
<br>
<span style="font-size:10px;"><span style="color:#ffffff;">You are receiving this email because you are a valued friend of the .<br>
Please note that your personal information is kept private and is never shared with other organizations.<br>
<br>
Want to change how you receive these emails?<br>
You can </span></span><span style="color:#ffffff; font-size:10px; text-decoration: underline;">change your subscription preferences here</span><span style="color:#ffffff; font-size:10px;">.<br>
View this email in a browser.<br>
<span style="color: #122147;">%%[ if 0 == 1 then ]%% %%Member_Busname%% %%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%% %%Member_Country%% %%[ endif ]%%</span></span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
You have a stray <!--[if !mso]><! -->, without a closing if (endif).
Remove that, and the text will show.
Related
I have tried multiple times to sort out the "Ghost table" for this email template to render in Outlook mobile and online to no success. For some reason it misaligns when printing into Outlook.
Desired look:
What I am getting (both Outlook online and mobile):
Code (This version contains no ghost tables to make it easier):
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="padding content" style="padding-top:0px;padding-right:25px;padding-bottom:5px;padding-left:25px;width:100%;text-align:left; font-size:20px;">
<p style="font-size:23px; font-weight:bold;line-height: 30px;padding-bottom: 5px;">
First 3 Things To Try</p>
<table align="left" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td align="left">
<table width="150" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<!--[if (gte mso 9)|(IE)]>
<td style="padding-top:15px;padding-bottom:15px;">
<![endif]-->
<td width="150" align="left" style="border-top:4px solid #4D5358;"></td>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="padding content" style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">
<table>
<tr>
<td width="80">
<img src="https://i.ibb.co/nnb4qnY/user.png" width="50" height="50" alt="" style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;">
</td>
<td width="370">
<p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Setup Your Profile Picture</strong></p>
</td>
<td width="150">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#007da5">
<a target="_blank" href="#" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block;">Learn
More
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="padding-top: 10px;padding-bottom: 10px;">
<p style="font-size:18px;line-height: 23px;min-width:600px;">Its tough to tell who's behind the mask sometimes. Give us a chance to remember what your face looks like by adding a profile picture to your account. Upon setting up your profile picture, within 48 hours it will be seen across all Office
365 products, including Teams and Outlook. Please select a work-appropriate photo.</p>
</td>
</tr>
</table>
<table>
<tr>
<td width="80">
<img src="https://i.ibb.co/V2R8KDW/mobile.png" width="50" height="50" alt="" style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;">
</td>
<td width="370">
<p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Get Setup On Your Mobile</strong></p>
</td>
<td width="150">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#007da5">
<a target="_blank" # " target="_blank "
style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block; ">Learn
More
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3 " style="padding-top: 10px;padding-bottom: 10px; ">
<p style="font-size:18px;line-height: 23px;min-width:600px; ">With Teams and Outlook mobile apps now available to all staff, it is possible to stay in touch, even when on the go. Follow the link to see how to get setup for both Android and iPhone devices. Link best viewed on a computer.</p>
</td>
</tr>
</table>
<table>
<tr>
<td width="80 ">
<img src="https://i.ibb.co/NTfj3jJ/feature.png " width="50 " height="50 " alt=" "style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px; ">
</td>
<td width="370 ">
<p style="font-size:18px;line-height: 23px;min-width:600px; display: inline; "><strong>Explore!</strong></p>
</td>
<td width="150 ">
<table border="0 " cellpadding="0 " cellspacing="0 " role="presentation " style="border-collapse:separate;line-height:100%; ">
<tr>
<td align="center " style="border-radius:4px; " bgcolor="#007da5 ">
<a target="_blank "href="# " target="_blank "
style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block; ">Learn
More
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3 " style="padding-top: 10px;padding-bottom: 10px; ">
<p style="font-size:18px;line-height: 23px;min-width:600px; ">With office 365 there are tons of new features across all applications that will make your workday experience easier and more efficient. Head to Halton's Office 365 hubpage to begin exploring all the features offered. Link best viewed on a computer </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Any help is greatly appreciated.
This will have to be more of a 'try these things' answer since there may be multiple issues.
First, I've never had any luck with colspans (or rowspans). Edit them out by nesting a new table in there.
Second, it may be that Outlook is running out of space. You've got min-widths of 600px, and padding as well. You usually only have 600px on desktops, and on mobiles, it's more like 300px. <td> elements will expand to the size necessary automatically, so if it doesn't need to be a specific width (your icon and buttons will need to be), then don't set it.
Third, you've ghost tables incorrectly. You only need them to fix something that Outlook (desktop) doesn't recognise, like max-width (and I probably min-width, but I've never needed to use that). It needs to be semantically correct, so this construction:
<!--[if (gte mso 9)|(IE)]>
<td style="padding-top:15px;padding-bottom:15px;">
<![endif]-->
<td width="150" align="left" style="border-top:4px solid #4D5358;"></td>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
Will render two <td> elements straight after each other. If you want something different for non-Outlook desktops, then use this:
<!--[if !mso]>-->
<td width="150" align="left" style="border-top:4px solid #4D5358;"></td>
<!--<![endif]-->
Fourth, consider what you want the layout to look like under a 300px viewport width. That may totally mess with your construction. But you can use #media screen and (max-width:600px) in a <style> section to set different styles for mobile (notwithstanding limitations on some versions of Gmail app, namely, Gmail IMAP/POP).
Fifth, buttons are a whole extra beast. I'm not going to answer it here since it deserves it's own question. Essentially, Outlook won't change an inline element to inline-block or block (or vice-versa). You have to style a <td> section and the <a> just gets colour and text-decoration.
Im sending a mail from a template using Mailgun. But renders incorrectly on Gmail.
Im not using any style tags or any complex css.
ps: im not sure how much text i should add to be accpeted.
Here is the html template
Template:
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Communication</title>
</head>
<body style="margin:0;padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" bgcolor="#fff" style="background-color:#fff;">
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border: solid 1px #000;margin-top:60px;">
<tr>
<td align="left" valign="top" bgcolor="#001529" style="background-color:#001529; font-family:Arial, Helvetica, sans-serif; padding:10px;">
<div style="font-size:36px; color:#fff;">
<b>FORGOT YOUR PASSWORD?</b>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#fff" style="background-color:#fff;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" style="color:#525252; font-family:Arial, Helvetica, sans-serif; padding:10px;">
<div style="font-size:16px;">
Dear {0},
</div>
<div style="font-size:16px;">
<p>A request has been received to reset your password for your -- account. Please click the button below to reset your password.</p>
<center>
<button type="button" title="Confirm Account Registration" style="background: #00415a;border:1px solid #00415a;">
<a href="{1}" style="font-size:22px; padding: 6px 12px; color: #f2faff;text-decoration:none;display:inline-block">
Reset Password Now
</a>
</button>
</center>
<p style="font-size:16px;">If you did not make this request please igonore this email.</p>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" style="padding:15px; background-color:#00415a; font-family:Arial, Helvetica,sans-serif;font-size:12px; color:#f2faff;">
<p>Regards<br/>
-- © {2}</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how it renders in Gmail:
Gmail:
Give a line-height to both title and button text, and should fix it.
Also i recommend against using margin-top or bottom in emails/tables but always go with padding instead. For some reason is more compatible. If you need some space above for instance, create a empty div above the element and give it a height.
Minifying the template seemed to fix the issue.
Bear in mind this is not a Gmail issue rather a Mailgun issue.
I am coding a custom email template HTML/CSS and I need to replicate the attached image.
My question is about the blue background color element, which goes beyond two table rows, one would be the "Welcome to the family", and the other would contain the video.
How can I implement that?
<!-- BEGIN MODULE: BODY CONTENT // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top" style="background-color:#1D75B9; border:0;">
<h2 style="margin:40px 20px; text-transform:capitalize; text-align:center;">Welcome to the family!</h2>
</td>
</tr>
<tr>
<td valign="top">*|YOUTUBE:[$vid=fj77lSG6Bl8, $max_width=500, $ratings=N, $views=N, $border=N, $title=N, $trim_border=N]|*
</td>
</tr>
</table>
<!-- // END MODULE: BODY CONTENT -->
Any example that makes the same thing would be helpful to me.
thank you
You can do like this :
<body style="margin:0px; padding:0px;">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top">
<img src="WvLArjpg6991210.png">
</td>
</tr>
<tr>
<td valign="top">
<img src="second.png" width="461">
</td>
</tr>
</table>
</div>
</body>
You have cut images into pieces and use in <tr><td><img src></td></tr>
I have created this email layout below, and cannot for the life of me figure out why Gmail renders it correctly, but Inbox renders it horribly.
Upon inspection, it is for some reason separating a bunch of stuff into their own table elements. Anyone see something I'm missing. I'm very new to html for email, and am constantly shocked at how bad it can be.
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td>
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="padding: 35px;">
<h3>
Welcome <span style="text-decoration: none;"><%= #email %></span>!
</h3>
<div>
<span style="display: block;">You can confirm your account email through the link below:</span>
<br>
Confirm your account
<br>
<span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(#resource, confirmation_token: #token) %></span>
<h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
</table>
</td>
</tr>
</table>
</body>
Here is what it looks like when Inbox for some reason hides the entire message, which seems to happen when I send a "reconfirm" message:
And Gmail:
I really recommend to take out all non table elements, since even if it is 2016, mail clients are way behind
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
shift
</td>
<td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
Swap
</td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td style="padding: 35px;background: #FFF">
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="text-decoration: none; font-size: 22px">
Welcome
# email !
</td>
</tr>
<tr>
<td style="padding-top: 20px; font-size: 22px">
You can confirm your account email through the link below:
</td>
</tr>
<tr>
<td>
Confirm your account
</td>
</tr>
<tr>
<td>
Or paste the following into the address bar:
confirmation_url
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 22px">
Thanks for signing up. We're looking forward to seeing you on the site!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center">
<td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
<%=T ime.new.year %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Knowing how "fussy" e-mail clients are, there's one thing that I see that may be causing unpredictable results. It's a long-shot that this will fix anything other than a typing error; but within that line of code, do you see what I see near 'color: 2b2b2b'?
<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>
The semi-colon is outside of the style attribute. Prolley just a foul ball, but you never know. ;)
I've checked out a few posts, and tried them. Didn't work. This may become a decision and tell clients this is what it is, but I don't want to come to that.
So after testing with Litmus, my main issue is the borders(left and right) vs the top and bottom image not lining up correctly on outbook 2007/10 vs everything else.
<body>
<style type="text/css">
body{
color:#415b7c;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
padding:0;
margin:0;
}
table {border-collapse: collapse;}
</style>
<table width="100%" bgcolor="#ffffff">
<tr>
<td><!-- header -->
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/top.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
<tr valign="top">
<td>
<table width="600" align="left" bgcolor="#ffffff" style="border-left-style:solid; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse: collapse; ">
<tr>
<td>
client log
</td>
<td>
<table cellpadding="10" style="color:#576276;">
<tr>
<td>
<p style="font-weight:bold">
Text
</p>
<p>
text
</p>
</td>
</tr>
</table>
</td>
<td>
client logo
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="color:#ffffff; font-size:22px; font-weight:500; line-height:30px">
<table width="600" align="left" bgcolor="#659acf" cellpadding="20" style="border-left-style:solid; border-collapse: collapse; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse:collapse;">
<tr>
<td style="color:#ffffff; font-size:24px; ">
text
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/bottom.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>
I've taken out client copy and logos.
As I've said it may come down to a decision of not letting it line up in outlook 2007/10, while letting it work in others.
So if anyone has any suggestions, it would be most helpful.
For outlook (And gmail) You need to specify border="0" on your images.
<img src="/" width="" height="" alt="" border="0" style="display:block">
This should be on every image you use in your email, even spacers. (In fact, especially on spacers, since those will create unwanted empty space without any content)
Also, Outlook has trouble rendering cell-padding and spacing (2007 and 2010 both use microsoft WORD as their rendering engine, I'll let you imagine how great that is to render html-emails).
So you should really be using nested tables instead of cell-padding, with spacer images to create the inner spaces of your sections.
Oh, and I see that all your styling is not inline. This will cause problems with your html-email stability. (gmail will strip every styling that is not inline, as well as the #000000 color on links (use #000001 instead)).
Oh also. Border styles and colors. Those will not display properly everywhere. The solution is again nested tables. With bgcolor and 1 / 2px width spacers to give the illusion of borders.
Hope this all helps. (I know this sounds like a lot of errors in your html-email, but once you get the hang of coding for the worst possible mail clients in mind, it'll become second nature! ;) )