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.
Related
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.
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 been working on an html email. It has generally worked in tests but gets mangled in Outlook. I have seen the questions on here and have been reading a decent amount on it, but after trying a variety of fixes nothing's worked. I am a total novice using dreamweaver, so I know the code might be horrendous:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Hybrid</title>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin: 0;" yahoo="yahoo">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Historic Renovation. </div>
<!-- Visually Hidden Preheader Text : END -->
<div style="max-width: 100%;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width"100%" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table width="60%" height="auto" align="right">
</table></div></center></td><td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/gallery/residential/">GALLERY </a></td>
<td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/services/">SERVICES</a></td>
</tr></table>
<table class="container " width="100%">
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b9d5dc85-0cfc-470f-a3e6-7abaffb8849d.jpg" width="100%">
</td>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table width="100%">
<tr>
<td style="background: #FFFFFF; font-size: 4vw; font-family: serif; text-align: right " width="100%" height="125px"><blockquote>
<p><a style="color: black" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">HISTORIC RENOVATION</a> </p>
</blockquote>
</td>
</tr>
</table>
<!-- 1 Column Text : BEGIN -->
<table width="100%">
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b1bd7d4c-a5f9-4081-a543-b94b4cf6d9d2.jpg" width="100%">
</td>
</tr>
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/328fa1bb-1858-4f8c-9c89-2002fd132365.jpg" alt="" width="100%">
</td>
</tr>
</table>
<table>
<tr>
<td>
<h1 style="font-family: sans-serif; text-align: left; font-size: 4vw; line-height: auto; padding-top: 20px; padding-left: 20px; color: #000000;"> Another Project in <span style="color: #4CA7A0"><a style="color: teal" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">Bucks County!</a></span></h1>
</td>
</tr>
<tr>
<td>
<p style="text-align: center; font-family: sans-serif; font-size: 3vw; line-height: auto; color: #000000"> Ernst Brothers is fulfilling the new owners vision for this property in Solebury, creating a serene guest house from the bones of this 18th-century farmhouse.</p>
</td>
</tr>
</table>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="right" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/" style="background: #222222; border: 15px solid #222222; padding: 0 10px; color: #ffffff; font-family: sans-serif; font-size: 2.75vw; line-height: 1.1; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->Read <span style="text-align: left"></span>More
<!--[if mso]> <![endif]-->
</a>
</td>
</tr>
</table>
<!-- Button : END -->
<!-- Visit US : BEGIN -->
<!-- Two Even Columns : END -->
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table width="100%">
<tr>
<td>
<a href="http://www.ernstbrothers.com/contact-us/"><img style="padding-top: 40px; display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/374d5aa5-5dd8-4a96-89e2-2a392f6092c3.jpg" alt="" width="100%">
</a></td>
</tr>
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/4441e9d8-1138-44e9-95ee-cd59c1019d9d.jpg" width="100%">
</td>
</tr>
</table>
<table width="100%" height="200px" style="background: #FEFDFD">
<td style="text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size: 4vw; line-height: auto;"><a style="color: black" href="http://maps.apple.com/?q=Ernst+Brothers&sll=40.186293,-75.227316&z=10&t=s"> 1104 North Bethlehem Pike <br>
Spring House, PA 19477</a></td>
</table>
<table width="100%" height="147" border="1" align="center" style="background-color: darkgrey">
<tbody>
<tr>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/391b81fc-92ee-4072-b859-dc538485f046.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/e5447cda-cd97-45b1-9411-6703b985f3b2.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b88e145d-feda-4b66-86fe-6aea5083e760.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/ba8cce9e-385a-4827-964d-fa608ffce6b2.png" alt="" width="80%"></td>
<td width"40%" style="font-size: 3vw; font-family: sans-serif; text-align: center"><a style="color: white" href="tel:+2154535124">215-453-5124</a></td>
</tr>
</tbody>
</table>
<!-- Email Footer : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to *|EMAIL|*
<br>
<em>why did I get this?</em> unsubscribe from this list update subscription preferences
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
#media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
Here is how it's intended to look, opened in chrome from the .html on my desktop. IMG
Here is what it looks like in Outlook. IMG2
Any help would be greatly appreciated.
Email is NOT front-end Web development. I used to use Dreamweaver for email development but had to abandon it since it would not let me use a mix of html 5 and older versions. That's the problem, email programs support a limited version of CSS3 and some don't support it at all.
Outlook is notorious because it doesn't follow a standard HTML rendering engine like Webkit. It's based on Microsoft Word.
Widths
Outlook doesn't really support a width wider than 800px. Gmail is similar. So width=100% will give you inconsistent results.
Fonts
Outlook straight up doesn't understand something like style="font-size: 2.75vw;" Try something like style="font-size: 18px;"
Images
For images, Outlook will respect a something like <img width="580"> but may not respond to <img width="100%">. I find it ignores widths in the inline style, but other programs use them very well.
Try something like this:
<img src=""http://www.gwally.com/news/photos/catintinfoilhat.jpg"
alt="A boy and his cat" width="580" align="center" style="max-width: 100%; width: 580px;"/>
I'm having issues getting my testing accounts to work, so I can't give as much help as you need. I think if you address these issues, it will take you further down the path to a consistent email.
For further information, this is a great resource on what works in email:
http://campaignmonitor.com/css/
trying to center align my email in Outlook Web Mail, it works great in every other client, gmail, etc even the outlook office app on Mac and PC but for some reason it aligns left in the webmail, tried adding a div align center after the body tag, didn't work either.
This is my setup:
<body align="center" style="background: #E8E8EA; font-family:Arial, Helvetica, sans-serif; font-size:12px; -webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-font-smoothing: antialiased; margin: 0 auto;padding: 0;">
<span class="preheader" style="display: none; font-size: 1px; color: #E8E8EA;">Preheader</span>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#E8E8EA; margin: 0 auto; text-align:center;">
<tr>
<td style="margin: 0 auto; text-align:center;" align="center" width="100%"><table cellspacing="0" cellpadding="0" border="0" style="background:#E8E8EA; margin: 0 auto; min-width:600px;">
<tr>
<td class="wrap" align="center" valign="top" style="background:#E8E8EA;" width="100%"><table cellpadding="0" cellspacing="0">
<tr>
<td align="center">View in browser</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
Your code will work well if you simply replace
min-width:600px;
with
width:600px;
Please Use this type formate it work in all type of webmail and outlook also
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table align="center" style="border-collapse:collapse" id="Table_01" width="700" height="auto" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
I am integrating an e-mail and it is tearing my hair out! My e-mail has a centered layout (I am currently using Ink's hero template). The problem is that my layout is not centered in Outlook Web app because this client does not support margin (so I cannot center my layout with margin: 0 auto;).
Here is a sample of my code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header" valign="top" align="center">
<table class="container" width="580" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="wrapper last" valign="top" style="padding-top:10px;">
<img src="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table class="container" width="580" align="center">
</table>
</td>
</tr>
</table>
</body>
</html>
So, Outlook is not well rendering my e-mail because all my align="center" attributes are removed by Outlook.
<div style="width:100%;margin:0;padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:100%;text-align:justify;padding:0;">
<tbody>
<tr style="padding:0;">
<td valign="top" style="background-color:#17303E;padding:0;">
<span style="background-color:#17303E;">
<table width="580" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
<tbody>
<tr style="padding:0;">
<td valign="top" style="padding:10px 0 0 0;">
<img blockedimagesrc="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance">
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
<tr style="padding:0;">
<td valign="top" style="padding:0;">
<table width="580" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
</table>
</td>
</tr>
</tbody>
</table>
</div>
My table which have a width of 580px should be centered vertically. I can "emulate" it in the developer tool by removing the margin: 0; style and adding an align="center" attribute. It may be a lead!
Thank you in advance for your help!
EDIT: Edited my code with the last version
Try putting align="center" on the child element (the table you are trying to align). Outlook can work slightly differently with align to other clients. It treats it like float on the element itself, while others treat it like text:align; on the parent.
Update:
You have a lot of unnecessary stuff in there. Here is a clean example:
<style>
table td {border-collapse: collapse;}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center" bgcolor="#17303E">
<table width="580" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#330000"><!-- colored so you can see it-->
<tr>
<td valign="top" style="padding-top:10px;"><!-- left aligned within centered panel -->
<img blockedimagesrc="..." alt="...">
</td>
</tr>
<tr>
<td valign="top" align="center" style="padding-top:10px;"><!-- center aligned within centered panel -->
<img blockedimagesrc="..." alt="...">
</td>
</tr>
</table>
</td>
</tr>
</table>
Here is an example basic setup to start your email with. It includes all the must have email normalization and a centered panel + independent forwarding background color.
<element align='center'> has also caused me trouble in the past. The way around it would be to use position: absolute; top: 50%; bottom: 50%; or something like that, in which case you would need to set your table a height/width in percentage.
You could even use margins like you mentioned: margin-top: 50%; margin-bottom: 50%.
Hope I could help.