So, typical question. I have searched a boatload here. Tried everything suggested. Nutin'
So Maybe to ask the question fresh.
I am having some verical gaps in Outlook 2013 (and 2007 too i think) between my image slices. (Also my text is extending further than it is set as)
Knowing that display:block doesn't really work for Outlook. I've tried wrapping in spans and giving the span a display:block
I'm at a loss. I'm hoping someone can answer this one easily. Grrrrr!!!! Outlook! Why must you be so popular?
http://pastebin.com/ESfEmWer
http://tinypic.com/r/2gtdhu1/6
Don't go for
display: [anything]
if you wish to include Outlook 2007. See http://www.xequte.com/support/maillistking/css_in_emails.html for reference of which CSS styles you can use and which you better don't.
Don't use any whitespaces trailing
<td>
and don't use any whitespaces preceding
</td>
And you should also avoid
<style>...</style>
as this will most likely will be striped away completely. Always go for inline-styles. And I know that this is not part of a real answer, but just as a hint: If you are doing HTML newsletters make them as if you were doing them for Internet Explorer 4. E-Mail clients like Outlook use the most ridiculous CSS-renderer you can imagine. Even Internet Explorer 5 is more sophisticated in rendering CSS then modern Outlooks.
Oh, and by the way: If there is a chance that the recipients of your newsletter might read them online in hotmail, gmx or gmail then you should check them, too. You will stand in awe and wonder how those online clients handle your code and what they inject.
You have a ton of whitespace causing the gap:
<a href="mms://a1783.v167326.c16732.g.vm.akamaistream.net/7/1783/16732/0/QPS.Onstreammedia.com/origin/jjready2/%5bInbox%5d/Talent%20Management/CDF%201-18_WMV.wmv">
<img style="display:block" src="http://emaniocreative.com/eblasts/3_26_2013/Message-from-Dominic-&-Louise.jpg" width="360" height="257" border="0" alt="Message from Dominic & Louise - Video"></a>
Try taking the whitespace out.. also display:block doesn't work like display:inline-block (the later you probably want instead) You cannot add formatting such as margin or padding to SPAN. I would keep what you have as IMG and DIV elements, however if you are using a TABLE you may want the border-collapse:collapse; property set.
Also to note, if you are using display:inline-block you will want to take out ALL whitespace between your elements:
<tr>...</tr><tr>...</tr>
Instead of what you have currently:
<tr>
...
</tr>
<tr>
...
</tr>
You have way too many colspans, which could cause problems. You should be nesting your tables instead.
I've created hundreds of emails and never had any issues with whitespace caused by line-returns in email code. (Outlook 2007 is the first thing I check my emails in)
It is always good practice to use display:block; and also keep images in their own <td> by themselves.
Try something like this instead:
<html>
<head>
<title>Ambassador Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>img {display:block}</style>
</head>
<!--REPLACE the following text with the path to the images on your server http://emaniocreative.com/eblasts/3_26_2013/ -->
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#ebebeb" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: collapse;">
<tr>
<td>
<!-- NEST A TABLE INSTEAD-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000">
<tr>
<td style="padding:20px;">
header
</td>
</tr>
</table>
<!-- /NEST-->
</td>
</tr>
<tr>
<td>
<!-- NEST A TABLE INSTEAD-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:20px;">
Body section 1
</td>
</tr>
<tr>
<td style="padding:20px;">
Body section 2
</td>
</tr>
</table>
<!-- /NEST-->
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
In my example I used padding instead of cells for spacing.
You never need a blank spacer image. Use a in an empty cell instead if you prefer not to use padding:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000">
<tr>
<td height="20" colspan="3">
</td>
</tr>
<tr>
<td width="20">
</td>
<td width="610">
header
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="20" colspan="3">
</td>
</tr>
</table>
On a side note, there is an unavoidable issue with vertical separation when forwarding from Outlook to Gmail for example, (courtesy of mso.normal p tags added) but for the initial recipient there are no problems.
Related
I have this table in my e.mail template and for some reason in outlook 2013 it apears double the height than it is actualy set:
[EDIT now codel looks like this]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
<tr class="preheader" width="100%" style="background-color:#d8ebf6;">
<td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
</tr>
</table>
DEMO
Maybe some ideas why this happens or how to solve the issue?
Outlook will ignore height on empty table cells, it's minimum height is about 10px. You can add a non breaking space and this will look empty but satisfy outlooks desire to always be awkward.
So I wanted to share the solution I found which works fine both in outlook and common email inboxes:
Basically I needed to nest table in a table to get this dark blue part in the middle which on lower than 600 resolution takes up 100% width. And I needed to add font size and invisible char , because otherwise outlook was making two lines instead of intended one line.
Using previously posted code and adding invisible chars between <td></td> tags and adding font size helped as well, but on mobile(lower than 600 resolution) these invisible chars were leaving small whitespaces from left and right, so dark blue was not taking whole width as wanted.
Code:
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
<tr class="preheader" style="background-color:#d8ebf6;">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
<tr>
<td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
DEMO
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! ;) )
I'm working on optimizing HTML emails for mobile devices. I have been tasked with finding a universal solution for creating a 2 column to 1 column responsive layout. I found an article written by Campaign Monitor - http://www.campaignmonitor.com/guides/mobile/responsive/. I've tried their markup and it works on most clients and browsers with the exception of Outlook 2007, 2010, and 2013. I've provided a jsfiddle link with my markup for reference. Is there a way to make this work in these version of Outlook?
EDIT: I'm not trying to make the responsive part of the email work in Outlook. I want the 2 tables ( Left & Right in the jsfiddle example) to display next to each other rather than stacked on top of one another. This works in Gmail (IE, FF, Chrome, Safari), AOL (IE, FF, Chrome, Safari), Yahoo (IE, FF, Chrome, Safari), Hotmail (IE, FF, Chrome, Safari), Apple Mail 4 & 5, Outlook 2003, Android 4.0, iOS 4, 5, & 6. My concern is only with Outlook 2007 and later when the rendering engine changed.
<html>
<head>
<style>
#media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody>
</table>
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #bcbcbc;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</body>
</html>
http://jsfiddle.net/bxdUp/
Have you tried adding align="left" and align="right" to the stacking tables?
See updated fiddle: http://jsfiddle.net/bxdUp/1/
You currently have the right table with align="left", but I have had success with Outlook table alignment manipulating the align value.
For anyone that comes across this SO and is looking for a solution to the above problem where the responsive 2-column content is ALSO centered I found that using conditionals to define columns only for Outlook made my world 1^300 easier. Of course it is no longer responsive in Outlook, but really... F Outlook.
<!-- define a 100% width table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="100%" style="text-align:center; background-color:white">
<!-- define a fixed width table using a class for responsive. I found that defining an arbitary height seemed to be important ~ silly Outlook -->
<!-- align center -->
<table cellpadding="0" cellspacing="0" class="fixedWidthTable" border="0" height="300" align="center">
<tbody>
<tr>
<td>
<!-- align left (this renders as float:left in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
<!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
<!--[if mso]></td><td><![endif]-->
<!-- Brilliant. -->
<!-- align right (this renders as float:right in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="right" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
</td>
</tr>
</table>
... close outer tables etc.
I've found that reductions in table widths by a few pixels work in the case for Outlook, which I can only assume is Outlook rendering pixel widths differently than other email clients.
Not ideal, but it has worked for me.
I don't think that it is gonna work on Outlook versions. Because first of all Outlook doesn't understand media queries. Outlook version 2007 is based on the rendering Engine of IE, while as Outlook version 2010 and version 2013 use Word as the rendering engine for displaying html emails. So I believe there is no way to get them to work in Outlook.
One more point is that when this code is executed in Outlook, it will ignore everything that is inside style tags. You should give style as inline for Outlook emails.
I have a table defined as
<table border="1" width="200px" height="auto">
<tr>
<td></td>
</tr>
</table>
Is there a way that I can align the table at the center of the page, apply background color to page without using css for any of these operations?
I assume you are doing something horrible like HTML email:
<center><table bgcolor="#ff00ff"></table></center>
<center>
<table border="1" cellspacing="0" cellpadding="0" width="200" align="center">
<tr>
<td background="http://www.yourdomain.com/email/images/background.jpg" align="left">
<!-- Stuff -->
</td>
</tr>
</table>
</center>
http://www.email-standards.org/
http://mailchimp.com/resources/guides/email-marketing-field-guide/
http://www.1stwebdesigner.com/tutorials/ultimate-guide-html-emails/
The background attribute was never valid on table or td. Pretty sure the only thing the HTML 4 specification had background on was body. But I vaguely recall that it worked elsewhere and I think table cells was elsewhere--whether it works in Outlook you'll just have to test. bgcolor was valid all of those places...and is likely to work.
I'm designing an HTML Newsletter and I've run into this problem:
As you can see, the cellspacing is completely out of whack: there shouldn't (and CAN'T) be a space between the rows on the left and right column. I don't really know what the culprit could be, any ideas would be appreciated!
Here's the relevant source code:
<table width="740" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="3">
<img src="top.jpg" width="740" height="53">
</td>
</tr>
<tr>
<td colspan="3" height="200" valign="top" id="headerCell">
<img src="header.jpg" width="740" height="200" alt="Headerbild">
</td>
</tr>
<tr>
<td>
L
</td>
<td valign="top" width="600" bgcolor="#ffffff">
CONTENT
</td>
<td>
R
</td>
</tr>
The HTML looks fine to me. Have you tried eliminating the unnecessary whitespace? That could be a possible cause (also, remember the great IE6, which had whitespace issues).
The HTML rendering engines in e-mail clients are just horrible. I've had to design some newsletters a while back and it sucked big time. Here's a nice collection of tips, maybe it'll be of some help.
I finally found out what was causing this spacing: a padding-top set on the center cell caused the left and right cells top edge to stay flush with the content-top of the center cell.