I have to style an email and when I was done and tested it all seemed to work fine, except in outlook.com, Microsoft exchange and Hotmail. For some reason exchange strips all code used (tables, tr & td tags) whatever I do, is there some workaround or is it just not possible? I have used CSS in my <style> tag. Should I change that to inline styling? or is there some other use.
Also my mail uses certain values (shortcodes) which are being given by the form, this works all fine in all other mail boxes but again not in outlook. If I can't use code there is there some workaround for that too?
So long story short, how can I use code in my html-email if Microsoft exchange breaks all code and gives a blank mail.
The entire mail you can see here on my test site
Here is my mail code:
<style>
td {
text-decoration: none;
color: #78797a;
width: 420px;
line-height: 22px;
border: 1px solid black;
}
img {
display:block;
}
h3 {
text-decoration: none;
color: #434343;
}
h4 {
text-decoration: none;
color: #434343;
}
-webkit-text-size-adjust: none;
</style>
<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top"><br>
<h4>Verwijzend arts</h4>
<tr style="padding: 10px">
<td> Naam</td><td> [naam_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Voorletters</td> <td>[voorletters_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Geslacht</td> <td>[geslacht_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Functie verwijzer:</td> <td>[verwijzer_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Naam instantie:</td> <td>[instantie_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Adres:</td> <td>[adres_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Postcode:</td> <td>[postcode_vw]</td>
</tr>
<tr style="padding: 10px">
<td>AGB code verwijzer:</td> <td>[agb_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Mobiel verwijzer:</td> <td>[mobiel_vw]</td>
</tr>
<tr style="padding: 10px">
<td>E-mail:</td> <td>[email_vw]</td>
</tr>
</table>
Shortcodes such as [email_vw] are the ones that are being given via the form which need to be in there.
Any tips and answers are appreciated thanks in advance!
EDIT * I was able to fix outlook myself but now Hotmail is for some reason empty and shows just plain code, would this be caused by the code being inline? *
Well after some searching and reading #tvgemert's article link I was able to fix outlook.
<!DOCTYPE html>
<html>
<head></head>
<body>
<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top" style="display: block;"><br><h3 style="text-decoration: none; color: #434343;">Met deze brief verwijs ik onderstaande client naar u voor een programma medische specialistische revalidatiezorg (MSR) bij BeLife.</h3>
<h4 style="text-decoration: none; color: #434343;">Verwijzend arts</h4>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Naam</td>
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> [naam_vw]</td>
</tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Voorletters</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[voorletters_vw]</td>
</tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Geslacht</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[geslacht_vw]</td>
</tr>
</table>
This has fixed outlook at the least by adding inline code the email is now no longer blank.
Related
I am trying to create a buttoon centered vertically in Outlook, I am using a code that another developer worked on, and trying to re-adapt it
in the code I am trying to set fixed values to avoid any issues but in outlook it displays extra space
in Outlook web, mobile, Gmail, browsers, etc, this is good and expected :
in Outloook Desktop :
This is the logic I am setting witgh my html code :
Border with 1 px and two spacers rows with 8px, and text container with line-height: 18px; ..
This is my HTML
<tr>
<td valign="middle" style="padding: 0px; vertical-align: middle;height:35px;" align="center" height="35">
<table
style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;height:35px;"
cellspacing="0" cellpadding="0" border="0" height="35">
<tr>
<td valign="middle" border="1" class="borders" dir="ltr"
style="padding: 0px; vertical-align:middle; border: 1px solid #4E4E4E; border-image: none; width: 220px; height: 34px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; vertical-align: middle; background-color: #EBEBEB;"
bgcolor="#303335" align="center" height="34">
<table
style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;"
cellspacing="0" cellpadding="0" border="0">
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; background-color: #ffffff;vertical-align: middle;"
valign="middle" height="8" bgcolor="#ffffff" align="center">
</td>
</tr>
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; line-height: 18px; font-size: 15px; background-color: #EBEBEB;vertical-align: middle;"
valign="middle" bgcolor="#303335" align="center">
<a href="%%=RedirectTo(CONCAT( TreatAsContent(#contentblock_link), '&utm_clickposition=cta', TreatAsContent(#contentblock_link_anchor)))=%%"
style="color: #4B4B4B ; text-transform: uppercase; vertical-align: middle; line-height: 18px; letter-spacing: 0.5px; font-family: "HelveticaNeueLight", Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: inline-block; ">%%=Field(#campaign_input_data,
concat(#contentblock, '_cta'))=%%</a>
</td>
</tr>
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; background-color: #ffffff;vertical-align: middle;"
valign="middle" height="8" bgcolor="#ffffff" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
It looks like your third row is expanding. I believe what is happening is Outlook is inserting a blank paragraph - though why that is not happening in the first row too is a mystery.
To ensure the right height for a blank row (in between the <td>'s), use the following construction:
<p style="margin:0;padding:0;font-size:8px;line-height:8px;"> </p>
Also ensure there are no spaces in between the <td>'s. I would use that on both the top and bottom row, for consistency. (Once you do this, you don't need the height: 8px; in the <td> style.)
I'm want to add new row using jquery any one help me to solve my problem"
'''
https://jsfiddle.net/dn6chabs/86/
jsfiddle here want to add new row
'''
So, there were quite a few issues with your code:
If you check console by hitting f12 you have this error Uncaught ReferenceError: $c is not defined because of this line: $("#field7").val($c);
I don't think it's necessary for the add and remove to be <a> tags, unless you want them specifically for styling, as it confuses the matter
$(this).parent().parent().remove(); this line doesn't really appear to do anything
Anyway, here's the corrected code!
$("#field7").val(c);, this has been corrected
The add and remove have been made <span> tags with custom styling to look like <a> tags
The onclick event has been corrected in light of this
The removal process has been fixed and is now $('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();, whereby it never removes the subtotal / total line
$(document).ready(function() {
$("#add_to_table").on('click', function() {
navObj = $("#table tbody:last").clone();
$("#table").append(navObj);
});
$("#remove_from_table").on('click', function() {
$('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();
});
});
$(document).ready(function() {
var a = document.getElementById("field5").innerHTML;
var b = document.getElementById("field6").InnerHTML;
c = a * b;
$("#field7").val(c);
});
.link {
text-decoration: underline;
color: blue;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="add_to_table" class="link">Add</span>
<span id="remove_from_table" class="link">Remove</span>
<table id="table" style="width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; border: 0px;" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr id="row">
<th scope="row" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">#</th>
<th scope="row" class="text-left" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">DESCRIPTION</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">UNITS</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">PRICE</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td id="field1" class="no" style="color: #fff; font-size: 1.6em; background: #3989c6;">01</td>
<td id="field2" class="text-left" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">
<h3 id="field3">WebSite <em><strong>Consultansy</strong></em></h3>
<em id="field4">Tasks related to meeting minutes AbC</em>
</td>
<td id="field5" class="qty" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">4</td>
<td id="field6" class="unit" style="background: #ddd;">$100.00</td>
<td id="field7" class="total" style="background: #3989c6; color: #fff;">$300.00</td>
<td>
</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group; vertical-align: middle; border-color: inherit;">
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2">SUBTOTAL</td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">$300.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2"><em>TAX Deductions</em></td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">00.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;" colspan="2">GRAND TOTAL</td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;">$300.00</td>
</tr>
</tfoot>
</table>
Check the fiddle: JSFiddle
Let me know how you get on!
I took a template and customized it. I have added a background color, it shows up in Chrome when I load the .html file in Chrome, but when I try and load this with outlook the background color does not appear. I have looked around but I am new to HTML so I didn't quiet understand how to apply those answers to my specific situation, especially because i did not write all of this code, I was given this to work on.
${config_styles_link(color: #227700; text-decoration: none !important)}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<table cellpadding="0" border="0" style="line-height: 1.2em; font-family:
'Helvetica Neue', Helvetica, Arial, sans-serif; border-spacing: 0px; font-
size: 100%; font-color: white; border: 0; background-color: #fff;"
cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="650"
align="center" style="line-height: 1.2em; font-family: 'Helvetica Neue',
Helvetica, Arial, sans-serif; border-spacing: 0px; font-size: 100%;
background-color: 252734; border: 1px solid #ccc; margin-top: 5px; margin-
bottom: 5px;" >
<tbody>
<tr>
<td style="padding: 16px 16px 0px 20px; vertical-align: middle;
font-size: 18px; color: grey;" align="left">
</td>
<td width="200" style="padding:16px 16px 0px 14px;vertical-
align:middle; line-height:12px;" align="right">
</td>
</tr>
<tr>
<td colspan="2" style="padding: 8px 16px 8px 20px;">
<imgsrc="static.pexels.com/photos/11406/c12ee0f379643a278198b2086afd3b9c.jp"
style="width:600px;height:142px;">
<p style= "color: D2D5EB">Hello ${user_first_name},</p>
<p style= "color: D2D5EB">
We are looking forward to your participation in ${webcast_title}.
<div style="border:1px white; height: 60px; width: 180px; margin-left: 80px;
font-family: arial; font-size: 17px; font-weight: 600; color: D2D5EB;
background-color: 252734; clear:both;">
${webcast_details}
</div>
<img src="https://thumbs.dreamstime.com/z/skull-human-size-robot-isolated-
black-35652577.jpg" style="width:104px;height:142px;">
</p>
<hr style="clear:both;">
<p> </p>
<p style ="clear:both; color: D2D5EB;">You can test your system now to make
sure you can view our webinars and videos: ${help_viewers_systemtest}.</p>
<p style="color: D2D5EB;">${channel_webcasts}</p>
<p style ="font-family: arial; font-size: 11px; font-weight: 600; color:
grey; text-align: center;"> In the meantime you can check out our website by
clicking here for more
information about what we do, future events and to check out our blog!</p>
<p style="font-family: arial, sans-serif; font-size: 12px; color:
D2D5EB;">Thank you,<br />
${webcast_channel_title}</p>
</td>
</tr>
<tr>
<td style="padding: 0px 16px 0px 20px; font-family:
Arial,Helvetica,sans-serif; color: #000; font-size: 11px; color: D2D5EB;">
<p>You received this email because you are subscribed to <a
style="color: D2D5EB;; text-decoration: none !important"
href="${webcast_channel_url}&utm_content=channel">${webcast_channel_title}
</a> on BrightTALK.</p>
</td>
<td width="120" style="padding:4px 16px 0px 0px;vertical-
align:top;" align="right">
<img title="BrightTALK"
src="https://p.brighttalk.com/platform_email/brighttalklogo.png"
alt="BrightTALK" width="120" height="34" />
</td>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="650"
align="center" style="padding: 0px 0px; line-height: 1em;">
<tbody>
<tr>
<td style="padding-top: 0px; font-family: Arial,Helvetica,sans-
serif; color: #000; font-size: 11px; background-color: 252734;">
<p style="font-size:11px; color: D2D5EB">All times are shown in your time
zone: ${user_timezone_alias}</p>
<p style="color: D2D5EB;">To update your email preferences,
please visit: ${user_link_preferences}<br />
Should you wish to unsubscribe from this channel please
visit: ${user_link_mybrighttalk}</p>
<p style="color: D2D5EB;">
For more information, please visit us at <a style="color:
#227700; text-decoration: none !important"
href="http://www.brighttalk.com">www.brighttalk.com</a> <br />
BrightTALKâ˘, 501 Folsom Street, 2nd Floor, San
Francisco, CA 94105</p>
<p style="color: D2D5EB;">${email_unsubscribe_link}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The background appears white in outlook, everything else turns up fine. I want the background color to be a navy-ish color.
The background appears white because you have the
background-color: #fff;
Change the #fff white colour for another colour you want.
Try, for example:
background-color: #0E061C;
I'm charged with 'rebranding' our IT department communications. I wanted to do our email notifications in pure HTML / CSS to ensure it's portability.
Below is the code, which looks exactly how I want it to in Outlook, however as soon as content is added to the main the words wont wrap correctly and if any content goes further than about 90% of the main content window, the other table components start to stretch!
I've tried all sorts of combinations of 'word-wrap' and 'overflow' at all levels in the table but I can't seem to have it.
My end goal is to have the entire table fixed width, with any long format information expanding down.
<table style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr style="border: 1px solid gray;">
<td style="height: 75px; width: 80px; text-align: center; font-size: 60px; font-weight: bold; color: White; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px; padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td><div style="height: 36; text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</div></td>
</tr>
<tr>
<td><div style="height: 36;text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</div></td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
<tr>
<td colspan="99" style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;">This is the main TD</td>
</tr>
<tr>
<td colspan="99" style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
Any help is greatly appreciated, this one minor issue is taking me way to long to overcome!
Good:
Bad (this is just random, wordwrapped text):
You have a few errors in your html:
you don't need a nested table for the right header section. Just the <div> portions are enough.
you should set widths for the 'Information' and 'Company name' <td> cells to prevent arbitrary wrapping.
your colspan value should be colspan="4", not colspan="99"
Anyways, to solve your problem you can add style="table-layout: fixed;" to your main table element, to allow yourself to set a more predictable table layout.
https://css-tricks.com/fixing-tables-long-strings/
In the end it was definitely related to the use of COLSPAN.
Instead I replaced the 'heading' piece with a nested table and that resolved the issue.
The specific code I used:
<table border="0" cellpadding="0" cellspacing="0" style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;padding: 0px; border-collapse: collapse;">
<tr>
<td style="height: 75px;text-align: center; font-size: 60px; font-weight: bold; color: White; width: 80px; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px;width: 200px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px;padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td style="text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</td>
</tr>
<tr>
<td style="text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
</table>
</tr>
<tr>
<td style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;"></td>
</tr>
<tr>
<td style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
It is certainly painful but unfortunately working with in the constraints of not only Outlook, but also our helpdesk application which doesn't allow direct HTML code. The only way is to directly copy a table in (which is why I've tried to contain it all in a single table!)
I am developing a newsletter template. Works well on Outlook2007 but on iPhone I still have some issues. With the following code I try to create a teaser block which contains an image and a text-block (made of a title and a text). In my intent, the text-block should not be higher than the image next to it. In iOS (Apple Mail) an annoying space is added between the title. Anyway idea about how to get rid of it?
<table border="0" cellpadding="0" cellspacing="0" class="teaser" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; cursor: pointer; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="92" border="1" valign="top" align="left" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;">
<img src='testImage.jpg' alt='' />
</td>
<td width="298" valign="top" style="color: #6f6f6f; border: #6f6f6f;">
<h1 style="font-family: arial; font-size: 12px; font-weight: bold; line-height: 15px; vertical-align: top; text-transform: uppercase; margin: 0px; padding: 0px;">
<a href="http://www.lyra.net/fabio" target="blank" style="color: #6f6f6f; line-height: inherit; text-decoration: none; position: relative; letter-spacing: 0.03em; top: -2px; margin: 0px; padding: 0px; border: 0px;">
Quias alitatem <br />qui cullat
</a>
</h1>
<p class="normal-text no-overflow" style="font-size: 12px; line-height: 15px; overflow: hidden; margin: 4px 0px 0px;">
WeeeeFFFFr? Quias alitatem qui cullat lique num et molor sitempo rionse.
</p>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td height="52" width="0" style="color: #6f6f6f; border: #6f6f6f;"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
P.S. I see there are already similar posts, but as they didn't receive any interesting answer and the markup one uses also makes the difference I decided to post a new questions. I would also love to post screenshots of the problems but it is only possible with reputation > 10
On the table cell of the image, add this: valign="top". It will force the content to the top. In email this works consistently unlike css vertical-align.
Also, <h1> and <p> tags are best to avoid for consistency. <font> tags work best in email.