I'm currently trying to build an if / else for my html email layout to include different table tags. This is what I'm trying:
<!--[if mso]>
<table class="content-table" role="presentation" cellpadding="0" cellspacing="45" align="center" border="0">
<![endif]-->
<!--[if !mso]> <!---->
<table class="content-table" role="presentation" cellpadding="0" cellspacing="0" align="center" border="0">
<!-- <![endif]-->
</table>
So I'm trying to start my table with a different beginn tag if the mail is opened in outlook. But this is not working. Whats wrong?
This is not a duplicate!
This is an example of how you show and hide in Outlook. If you're viewing this in Outlook, you'll see the word "Outlook". If you view it in a modern email client, you see the words "Modern Email".
https://jsfiddle.net/wallyglenn/5hruzos5/1/
<table>
<tr>
<td>
<!--[if !mso]><!-- -->
<img src="http://via.placeholder.com/300x300/0000ff/?text=Modern+Email" alt="Modern+Email" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
<!--<![endif]-->
<!--[if gte mso 9]>
<img src="http://via.placeholder.com/300x300/ff0000?text=Outlook" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
<![endif]-->
</td>
</tr>
</table>
Good luck.
Related
I am working on an E-Mail-template and have some issues due to special needs coding for Outlook E-Mails.
In the following I will show an example of a picture with what I tried to make some spacing on top of it.
But several options didn't work out.
However I tried different options like:
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" style="Margin-top: -20px;">
<![endif]-->
Or
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" style="margin-top: -20px;">
<![endif]-->
Or
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" style="padding-top: -20px;">
<![endif]-->
Or
<style>
.rebtn {padding-top: -20px;}
</style>
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" class="rebtn">
<![endif]-->
Or
<style>
.rebtn {margin-top: -20px;}
</style>
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" class="rebtn">
<![endif]-->
None of them worked.
I would be very grateful if you could help me with this issue.
Cheers, JD
-------------------EDIT-------------------
So here is some more detail for better understanding:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px">
<tr>
<td align="right">
<a href="#rg">
<!--[if !mso]><!-- -->
<img src="img/btn_rng-ans.png" class="img-btn">
<!--<![endif]-->
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn">
<![endif]-->
</a>
</td>
</tr>
...
</table>
And here the external CSS Code for the image:
.img-btn {width:200px; margin-top: -40px !important;}
It should look like that:
But on Outlook on Windows its like that:
Outlook listens to spacing on block-level elements like <p> and <td>.
You can use a paragraph to create spacing in the following way, noting padding will be ignored:
<p style="margin:20px 0 0 0; line-height:0; font-size:0;"> </p>
Note I'm zeroing the height of the text with line-height and font-size, so that that does not get in the way (would be added to the height of the margin otherwise).
You could also just use the table if you have it already in place:
<td style="padding:20px 0 0 0;">
Outlook doesn't regard margin in a td. You have to use padding. No need to put it in the table as well.
Negative margins are only used when you want to overlap items, and you need a hack for that. But it appears that's a completely different question. What you need to figure out is what is causing the space.
Space in summary can be caused by:
Padding on td, table
Margin on p
Line-height and font-size, even on 'empty' table cells (e.g. <td></td>)
And remember to zero the cellpadding and cellspacing on tables: <table cellspacing="0" cellpadding="0"> unless you are specifically using it
Outlook ignores spacing on:
divs (except for inline-level styles such as font-size)
spans (except for inline-level styles)
attempts at changing elements to block (through display:block), and any padding/margins on that (e.g. trying to do a button on an <a> element)
I just made the following to fix it:
<!--[if !mso]><!-- -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px">
<tr>
<td align="right">
<a href="#rg">
<img src="img/btn_rng-ans.png" class="img-btn">
</a>
</td>
</tr>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:-20px">
<tr>
<td align="right">
<a href="#rg">
<img src="img/btn_rng-ans.png" width="180" class="img-btn">
</a>
</td>
</tr>
</table>
<![endif]-->
Instead of:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px">
<tr>
<td align="right">
<a href="#rg">
<!--[if !mso]><!-- -->
<img src="img/btn_rng-ans.png" class="img-btn">
<!--<![endif]-->
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn">
<![endif]-->
</a>
</td>
</tr>
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?
I've built a responsive email which works in the majority of email clients
However in Outlook the parent table that makes the content 600 wide is not being respected - resulting in a broken layout.
>Image of broken email in outlook
I'm really stuck . Does anyone know why this might be happening?
JS Fiddle of my code --> https://jsfiddle.net/2m05tzf5/
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<td>
<center>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;" class="emailwrapto100pc" id="content">
Try using CSS table{table-layout: fixed; width: 600px;}. Keep in mind that not all attributes and CSS rules are supported in all e-mail parsers
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 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.