I have a responsive email that i am struggling to make Outlook look correct.
I have the below html which should put the 2 tables next to each other but it is stacking them ontop of each other.
I am using...
<!--[if (gte mso 9)|(IE)]>
to target outlook but it seems to be ignoring this. It is also ignoring my max width call in the style tag.
Any idea why this is happening?
<tr>
<td class="innerpadding ">
<!--[if (gte mso 9)|(IE)]>
<table width="360" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col400" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<img src="Dog.png" alt="Dog Image" width="95%" border="0" style="width:95%;max-width:360px;"/>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="240" align="right" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col240" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<span style="font-family:Arial, Helvetica, sans-serif;font-size:38px;color:#f4911c;">Text Here</span>
<span style="font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#555557;display: block;font-style: italic;padding-top: 10px;line-height: 22px;">Text Here</span>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Try setting a width="" value on your container table. Also adding align="left" there might help. In the past I've found that Outlook has needed that even though it is the children elements that are aligning/floating.
If that doesn't work, just for testing, try adding a top padding and different bgcolor to your conditionally hidden tables to see if they are triggering or not. This will help diagnose if it is the conditional breaking or something else...
Both your tables are set to a width of 100%, try setting the style='width:100%' to 50% for each table and see if this works.
Also, what code is on the classes (col400 and col240) for both tables? This is likely to have an impact.
Related
I'm working with an HTML email template for a project. Everything works great on Gmail, Yahoo, and Outlook web email client, except for the Outlook desktop app v16.0, which I have a spacing rendering issue. I used mso conditional statement to target this specific version. But it doesn't seem to work the margin-bottom that I added in and wrapped in mso statement didn't acknowledge. Any idea how to fix this?.
Email rendered in Gmail and Outlook
Here is my code:
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
<table cellpadding="10" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
<tbody>
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;width:560px" valign="top">
<table cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;" width="100%">
<tbody>
<tr style="border-collapse:collapse">
<!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->
<!--[if gte mso 9]>
<td align="left" style="padding:0;Margin:0;Margin-bottom:8px;">
<![endif]-->
<!-- END -->
<td align="left" style="padding:0;Margin:0;">
<p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You’re just one step away from being</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Your html is not valid with two after eachother on outlook. And as #jmona789 says, a td you make it on the side not above. Maybe this would work better with a new
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
<table cellpadding="10" cellspacing="0"
style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
<tbody>
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;width:560px" valign="top">
<table cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;"
width="100%">
<tbody>
<!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->
<!--[if gte mso 9]>
<tr style="border-collapse:collapse">
<td height="8" style="height: 8px; font-size: 0px; line-height:0px">
</td>
</tr>
<![endif]-->
<!-- END -->
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;">
<p
style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">
You’re just one step away from being</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
You have done some typo here, You have made first letter capital of margin property, which is setting paragraph margin to 0. Make this margin property all lowercase. See typo error in code below:
<p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You’re just one step away from being</p>
Replace all Margin to lowercase margin to fix this issue.
I've applied Bulletproof backgrounds to achieve background images for Outlook. The background images load fine, but its style/structure isn't what it should be on Outlook.
How it looks on Gmail (how I want it):
How it shows on Outlook 2007, 2010, 2013 and 2016 (Windows):
Any ideas on why this is happening?
Code:
<!--DOCTYPE html-->
<html>
<head>
<title></title>
</head>
<body>
<table leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" border="0" cellpadding="0" cellspacing="0" style="width:600px; margin:0 auto; ">
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td class="background_image-td" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div class="background_img-container">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
<!-- Nested table for overlapping td -->
<tr>
<td class="table-td" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table-td">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#e3e1e5" style="width:50%; opacity: 0.9; padding: 40px 40px; background-color: #e3e1e5;">
<tbody>
<tr>
<td style="color: #1c9ad6; font-size:1.5rem; font-family:'Klavika', Arial,sans-serif; text-align:left; padding:20px;">How to address your taste formulation challenges.</td>
</tr>
<tr>
<td style="padding:10px 0px;">
<!--PADDING-->
</td>
</tr>
<tr>
<td class="table-td" align="center">
<a href="#" alt="Discover more at SSW" target="_blank">
<img src="https://storage.pardot.com/213851/80839/discover_more.png" alt="Discover more at SSW" style="width:246px;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Nested table end -->
<!-- Creating padding below nested table -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
<!-- Nested table end -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add a height to this line of VML. If i recall Outlook won't adjust a VML shape to the content inside it.
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
One thing to be aware of is that left padding won't work inside VML in Outlook 2013/2016. If the padding is essential, try replacing it with a fixed width td and use CSS/Media Query to hide this and apply padding for mobile views.
Try adding to your mso-fit-to-shape:true to your textbox styling. This makes VML fit to your content without the need to put in heights.
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
I haven't found in the Internet any solution to make a RWD (Responsive Web Design) breakpoints columns for html emails where after braking two columns next to each other into two centered one under the other when a screen has small width, so using information found elsewhere i had to try to figure out how to do something working best. Below is the code which work for the really old e-mail clients and Outlook 2007+ and windows 10 e-mail client - the rest can be done using styles and media query. The breakpoint. Of course for outlook 2007+ a column is going to always have fixed width, but the columns break down when screen width is about less than 600 px.
Is this the best solution available? My goal is basically not to ask this question but to share solution to the public. But i am going to ask a question in another topic about vertical alignment of below example when the columns have different heights (yes the code below is lacking one little thing yet: columns are aligned in Outlook 2007+ to the bottom, not the top of the line). Two columns with pictures example next to each other (basically just paste, please, your > 600px html e-mail and send to yourself):
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
Of course - you can use table align="left" two get two tables next to each other but after brakipoint they are one under another but aligned left not center - so what is above work the best right now for me. Let me remind the question. Is the above example the best RWD solution for html e-mails?
Note: email template is working fine with browser,when attach the email template in outlook window ,img src attribute image gets displayed but below code is not working.
Today i have faced an issue with an email template in html and css, i have send the mailer template from outlook , but the backgroud:url("https://image.flaticon.com/teams/new/1-freepik.jpg") inside the table.
This is the below piece of code have problem.
I have tried to insert the image in table tag ,still image is not displayed.
Method 1:
<table background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-size:cover;" height="380">
Method 2:
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;" height="380">
Method 3:
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:https://image.flaticon.com/teams/new/1-freepik.jpg; background-size:cover;" height="380">
Nothing works
expect img src="tag"
Email templates ca be tricky. I would advice you to add the background image on a TD tag and not a Table, like so:
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380">
<tr>
<td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;"></td>
</tr>
</table>
Inside the TD add another table with the rest of the content of your template.
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380">
<tr>
<td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Email content in here </td>
</tr>
</table>
</td>
</tr>
</table>
If, for some reason, this doesn't work for you, I advise you to visit backgrounds.cm and see their v:fill code for background images in tables that looks something like this:
<td background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" bgcolor="#7bceeb" width="225" height="225" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:225px;height:225px;">
<v:fill type="tile" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
I am having an issue with keeping 2 images on the header of an email as display:inline-block i need the 2 images to "touch" each other so there isn't the white gap between them like the screen shot below. It would be great it it could be 1 image but they are both linking to different urls.
Here is the code for this TD. Ohhh of course this is responsive as well :)
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="258" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="width:100%;max-width:258px;">
<tr>
<td><img alt="" src="header-l.png" style="width:100%;max-width:258px;border:0;display:block;" /></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="258" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="width:100%;max-width:258px;">
<tr>
<td><img alt="" src="header-r.png" style="width:100%;max-width:258px;border:0;display:block;" /></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
I also have these styles in the header... When i added this "mso-table-lspace:0;mso-table-rspace:0;" to the table it slimmed up the LARGE gap that was there but still have like a 2px gap between them.
.content {width: 100%; max-width: 516px;}
table {border-collapse: collapse;table-layout: fixed;margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;}
table table table {table-layout: auto;}
table table {table-layout: auto;}
Willing to try any suggestions!
Can you test with this structure :
<table style=" margin:0;"cellpadding="0" cellspacing="0" border="0" >
<tr style=" margin:0;">
<td style="margin:0;">
<img style="margin:0; display:block;" src="img2.jpg" />
</td>
<td style="margin:0;">
<img style="margin:0; display:block;" src="img1.jpg" />
</td>
</tr>
</table>
I never test responsive with email... so i work with fix size on all of my element...
A working fix is to add the following style sheet to the head part of your email
<style type="text/css">
[office365] button,div {display: block !important; }
</style>
With this all newly added button/div parts from outlook online get the correct display block setting and the white spaces disappear