I have a fair bit of experience coding emails and am familiar with the nightmare that is Outlook but this is a new one for me and, what's more, it only seems to be affecting some users. Basically, in our newsletter templates there is a table designed to nest the content in. It has columns on the left and right with width attributes to act as margins. For some users of 2010, Outlook seems to collapse the columns, for others it doesn't.
Is anyone aware of a setting in Outlook that might cause this to happen?
Here's a version of the code, with the contents stripped out:
<table style="FONT-FAMILY: Helvetica Neue, Arial, sans-serif; COLOR: #4b4b4b; FONT-SIZE: 12px" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#FFFFFF" align="center">
<tbody>
<tr>
<td rowspan="6" width="30"></td>
<td height="30"></td>
<td rowspan="6" width="30"></td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 40px">
<table style="WIDTH: 540px">
<tbody>
<tr>
<td style="TEXT-ALIGN: right; PADDING-BOTTOM: 10px; FONT-SIZE: 10px"></td>
</tr>
</tbody>
</table>
<table style="WIDTH: 540px" border="0" cellspacing="0">
<tbody>
<tr>
<td width="340"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 20px"></td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 45px; FONT-SIZE: 10px; BORDER-TOP: #412878 4px solid; PADDING-TOP: 20px">
</td>
</tr>
</tbody>
</table>
Thanks,
M
My advice would be to look at Campaign Monitors CSS support list for email clients; positional CSS such as margin, padding etc. are completely ignored by Outlook '10. Stay as far away as possible from CSS when using Outlook '10, code like its the early 90's and use height attributes and extra elements if needed.
http://www.campaignmonitor.com/css/
Related
I am creating HTML table in Outlook email to make it look like a template example like this,
However the one I created isn't match like it should be. There are 3 issues,
first Manage Information Technology at top right is shift down instead of suppose to be equal position as black box logo like an example template from above.
Second, ServiceNow - Release Notes aligned on left instead of center even though I already have align="center" in <td>.
Third, the black border line locate below orange banner disappear but the snippet code and the outlook preview is showing it but the actual outlook is not.
Here is 2 images of incorrect outlook display,
<table style="height: 643px;" width="772" cellspacing="0" cellpadding="0">
<tbody>
<tr style="border-style: none none solid none;">
<td colspan="2"><span style="font-family: 'times new roman', times;"><img id="logo" style="float: left;" title="" src="toolbar-logo.png" alt="" width="127" height="44" /></span></td>
<td colspan="2">
<p style="text-align: right;"><font face="calibri, times"><span style="font-size: 18.6667px;"><font color="red"><strong>Manage Information Technology</strong></font></span>
</font>
</p>
</td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><font size="7" face="calibri"><strong>ServiceNow - Release Notes</strong></font></td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><img id="dss-banner" src="DSSbanner.png" alt="" width="100%" height="161" /></td>
</tr>
<tr>
<td style="background: none; border-bottom: 4px solid #000000; height: 2px; width: 100%; margin: 0px 0px 0px 0px;" colspan="4"><span style="font-family: 'times new roman', times;"> </span></td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Team,</span></td>
</tr>
<tr>
<td colspan="4"><span style="font-family: 'calibri', times;"><span style="font-size: 12pt;">The following capabilities and improvements have successfully been promoted to the production ServiceNow instance through "${short_description}" on ${mail_script:release.stories.email.date}.<br />The release notes have also been added in the Release Notes Knowledge Article per standard process.</span></span>
</td>
</tr>
<tr>
<td>${mail_script:release.stories.email}</td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Thank you,<br />Service Management</span></td>
</tr>
</tbody>
</table>
Can anyone point where where possible reason why it didn't match correctly?
I'm coding an email newsletter that must look correct in all email clients, including Outlook 2007+. One section of the email contains two columns that roughly looks like this:
----------------------------------------
| | |
| | |
| fluid | 340px wide |
| content | ad |
| | |
| | |
----------------------------------------
The ad in the right column should always be 340px. The left column should shrink and grow to fill the remaining space. This is easy to accomplish with a table based layout as long as the screen remains large enough.
However, for smaller screens, such as phones, we need the ad and content to move onto another line, otherwise it forces horizontal scrolling. We originally accomplished this with floated divs, and a min-width and max-width on the left column. But this does not work on Outlook as it both ignores the float and reformats the divs, and the only workaround we've found for Outlook's eccentricities is to convert our divs to tables (which won't work in this case).
Is it possible to accomplish what we're trying to accomplish in Outlook 2007+?
The closest I've come is the below, which is not fluid:
<table class="msoFix" width="270" cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="15"> </td>
<td width="250" align="left" style="padding: 0px; font-family:Arial, Helvetica, sans-serif; color:###textColor#; font-size:14px; line-height:16px; font-weight:normal;">
Content
</td>
<td width="5"> </td>
</tr>
</table>
<table class="msoFix" width="355" cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="5"> </td>
<td width="345" align="right" style="padding: 0px;">
Ad
</td>
<td width="5"> </td>
</tr>
</table>
Not sure if this would work but newer things like phones should be browser compatible whereas outlook isn't so you could use media queries to change you tables into block elements for smaller screens (allowing for stacking) and this should be ignored by outlook so you should still have the table layout. But to make your table fluid, you need to add a width onto every column that is fixed width and then leave the fluid column with no width. I would also merge the 2 above tables:
#media (max-width: 345px) {
.msoFix, .msoFix * {
display:block;
width:100%;
}
.msoFix td.spacer {
display:none;
}
}
<table class="msoFix" width="100%" cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="15" class="spacer"> </td>
<td align="left" style="padding: 0px; font-family:Arial, Helvetica, sans-serif; background:green; font-size:14px; line-height:16px; font-weight:normal;">Content</td>
<td width="5" class="spacer"> </td>
<td width="345" align="right" style="padding: 0px; background:blue;">Ad</td>
<td width="5" class="spacer"> </td>
</tr>
</table>
Example Fiddle
Yes it is possible, you can use media queries for mobile as they can read them...
It would look like this.
#media max-width(380px) {
table[class=left-column],
table[class=right-column] {
width: 100% !important;
}
}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">
<!-- give the tables a class then use a media query for mobiles -->
<!-- I've found that using 2-3% less than 100% width removes possible errors in outlook -->
<table width="32%" cellpadding="0" cellspacing="0" align="left" class="left-column">
<tr>
<td width="15"> </td>
<td width="250" align="left" style="padding: 0px; font-family:Arial, Helvetica, sans-serif; color:###textColor#; font-size:14px; line-height:16px; font-weight:normal;">
Content
</td>
<td width="5"> </td>
</tr>
</table>
<table width="65%" cellpadding="0" cellspacing="0" align="right" class="right-column">
<tr>
<td width="5"> </td>
<td width="345" align="right" style="padding: 0px;">
Ad <!-- set the ad to 100% width -->
</td>
<td width="5"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
css-tricks has a good article on responsive columns in emails. https://css-tricks.com/ideas-behind-responsive-emails/
I have a HTML newsletter table, to structure the content I want horizontal borders. Somehow the horizontal borders always have 100% width according to the table width. How can I achieve 20px padding to the left and right of it?
js fiddle
HTML
<table border="1" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr style=" padding: 0 20px 0 20px;">
<td style=" padding: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
you can't able to do what you want in current code
you need to do some trick
see this
<table border="0" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr >
<td> <hr style=" border:0px; margin: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
i have used (HR) tag in 2nd table row, this will solve your problem ☺
A border does not take padding into account, but it does with margin. See the CSS Box Modell for reference.
On CSS, there is the cascade. It parses top-dowmn and specific overrides general
There are many ways to achieve what you want (including ways in which we have to change the HTML code). Suppose you want to keep the table layout. You can just set the border-left and border-right of the middle td like this:
tr.hr > td {
border:none;
border-left:20px solid white;
border-right:20px solid white;
background:red;
height:3px;
}
HTML:
<tr> <td> Banana </td> </tr>
<tr class='hr'> <td></td></tr>
<tr> <td> Apple </td> </tr>
Demo.
Note that the color of border-left and border-right should be the same to the background color of your table. (they are all white in the demo).
Please have a look at the HTML email boilerplate.
http://htmlemailboilerplate.com/#f1
Limitations using CSS: http://www.campaignmonitor.com/css/. It solves may issues with ie. spacing amongst others and email clients rendering issues (Gmail, Outlook,Yahoo, ...)
HTML emails need to respect 600px width as it is a default for the preview.
To test the HTML email (if no mail configured on a testing server) you could use http://putsmail.com/ Check also on smart phone as many people tend to read mail on it
You can achieve the effect using a combination of 3 cells where the first and last use spacers and the middle can be a red solid color gif.
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
<td valign="top" width="560">
<img src="red.gif" width="560" height="3" alt="" />
</td>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
</tr>
</table>
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! ;) )
After a lot of time I put into researching. I still can't find an answer.
I have a HTML that is showing the wrong width in my tables. Here is a link to the html email: https://tagwebstore.com/email/tag-email-10percentmore.html and here is a screenshot of how it looks in Outlook 2007:
The main problem is the bottom area. The link of the html email displays it correctly. I have no idea what else to do from here. Here is my code for the bottom part I am having trouble with:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" colspan="3" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
<tr>
<td width="28"></td>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.</td>
</tr>
<tr align="right">
<td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table></td>
<td width="28"></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
</table>
<!--Testimonial End-->
<!--Footer-->
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="295" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">info#tagwebstore.com | 866.232.6477</td>
<td width="178" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">Follow us on Twitter & YouTube</td>
<td valign="middle" width="102"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" /><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
<!--Footer End-->
The width of the containing table is suppose to be 625px. Any help is appreciated.
oh the joy of html emails
There are many rules you have to obey when dealing with HTML-based email, especially when you have exacting clients and pixel-perfect designs, and I am quite glad that I haven't had to work on such a project for at least two years now... The main reason for my utter dislike of the practice is primarily down to two email-clients. The first and all time worst being Lotus Notes 6.5.4 (to be fair it's over 10 years old now.. but still!), and the all time second worst(s), they're not even the best at being bad, Outlook 2007 and 2010!
Whoever thought it would be a good idea to use the Microsoft Word WYSIWYG HTML Engine to render HTML Emails in Outlook 2007 and 2010, must have been mad, lazy, lost or ever-so-slightly confused (delete as appropriate). It causes no end of rendering problems for developers, usually with random and inexplicable sizing calculations or padding problems.
Taken from my blog http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html
Simply put, I do not envy you :)
I found the best way to help me out with my email troubles was to follow the following rules:
Never use colspans or rowspans.
Always set correct dimensions for your tables and cells.
Use spacer gifs rather than &nbps;.
Always specify correct image sizes and never scale images up or down.
Always add style="display:block;" to images.
Avoid using divs.
If you wish to colour links, put the styling on a span as a child inside the a tag.
Don't use italics.
Don't use BRs for layout, always use tables.
Use BRs in Text, not Ps (to avoid stange margin problems and paragraphing being completely ignored).
Because the sheer number of emails I used to get through ended up being ridiculous, I developed a script to help me with the work of checking dimensions and other possible pitfalls. If you're interested in using it you can find it here:
http://pastie.org/6250834
The script can be added as a usual script tag or enabled using GreaseMonkey or something similar (it was designed to work with Firefox but I see no reason why it shouldn't work elsewhere). Due to the way I used to build my emails, it will only enable itself if either the following conditions are met:
There is an outer wrapping table that has width="100%" set, used to centre the actual email content.
or... there is an outer element (a table or div) that has the id="base".
I've passed your HTML through it and the image below is the resulting output, it makes more sense when you have the actual page because you can hover over each bordered item and it will give you a rough idea of what the problem is (either that or you can just inspect the element directly with Firebug or similar).
So from inspecting the above it seems you have a few problems that need to be fixed, I'd say the most important ones are to get rid of rowspans and colspans (these always cause problems in Outlook) and to make sure all your dimensions tally correctly. Once you've fixed these issues you might see a considerable improvement, but then again you might not, there are no certainties in the hazardous life of HTML email building...
Hope it helps.
Try this for your top table:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
</td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28">
</td>
<td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
</td>
</tr>
<tr align="right">
<td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table>
</td>
<td width="28">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
</table>
and this for your bottom:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
info#tagwebstore.com | 866.232.6477
</td>
<td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
Follow us on Twitter & YouTube
</td>
<td valign="middle" width="49">
<img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" />
</td>
<td valign="middle" width="53">
<img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
Overall it was coded really well, just changed a few small things, not saying each was a must have, but IF it works you can reverse engineer the changes to find out what busted it. I haven't tested it, so hopefully this works...