I am having a outlook html email nightmare here.. Basically there is one table and one image on the top and content on the bottom.:
The image is always substracting 1px so it is never 100% with the table. Anyone knows a solution?
<table cellpadding="0" cellspacing="0" style=
"margin-left:2px;padding:0px; width:846px; background-color:#000">
<tr>
<td>
<div style="font-size: 0px;"><img border="0" src=
"img/header1.jpg" style=
"display:block;align:bottom;border:none;padding:0; width:846px;"></div>
</td>
</tr>
<tr>
<td>Blah.. Content</td>
</tr>
</table>
I'm pretty sure this is from outlook's issue with border-collapse. Try this:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left" valign="top">
<img src="http://placekitten.com/g/640/300" width="640" height="300" alt="" style="display:block;" border="0" />
</td>
</tr>
</table>
Use the img tag for images.
Outlook uses Word for rendering HTML markup. You can read more about that in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Related
In my email, there is a right-aligned image. And the problem is, its right side does not exactly stick to the right edge of parent table cell, in stead, there is a 1px gap. That only happens on Outlook 2007, 2010, and 2013, not on other versions of Outlook and other email agents.
Please copy the code at here and send it to Outlook 2007, 2010, or 2013 to see the problem.
I had tried many solutions such as border-collapes, mso-table-rspace, mso-line-height-rule, etc, and still had no luck.
When using images emails tend to perform more consistently when the width and height are also added to the which surrounds the image, please see my edited version of your table holding your image.
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="ffffff">
<tr>
<td width="600" align="right" bgcolor="ffffff" style="padding: 50px 0;">
<table align="right" width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="200" align="right">
<img style="display: block;" src="http://placehold.it/250x200" width="250" height="200" border="0" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
Problems can also arise when <td> or <table> have no fixed widths, but immediately outer <td> or <table> do, as the inner <table> or <td> may not inherit the widths properly.
I haven't had an opportunity to test this, but I will if I can.
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! ;) )
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.
I have a table defined as
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width="600" border="0" cellspacing="0" cellpadding="25">
<tr>
<td width="210">Content 1 with grey background</td>
<td width="390">COntent 2 with white background</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" colspan="2"><img src="image.jpg" width="600"></td>
</tr>
</table>
Now this image.jpg has 210 px as grey background and 390px as white background in order to align with the above table cells.
However, it shows up as non aligned in outlook 2007. It shows up fine in others.
Any suggestions?
You're lucky it shows at all. The background property is loosely if at all supported by most email clients. I would suggest against using it or using just an <img> tag instead.
Here's more info on what outlook 2007 supports:
http://www.email-standards.org/clients/microsoft-outlook-2007/
I have an html email set up as
<td valign="top"><table width="650" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr>
<td width="25" valign="top">
<img src="/images/left_border.jpg" border="0" align="right" style="padding:0; display: block;">
</td>
<td width="600" valign="top" style="padding: 0px;">
<img src="/images/banner.jpg" border="0" align="left" style="padding:0; display: block;">
</td>
<td width="25" align="left">
<img src="/images/right_border.jpg" border="0" align="left" style="padding:0; display: block;">
</td>
</tr>
</table>
</td>
However in outlook 2003 and entourage email clients, it appears as an additional border on left and right sides.
How can it be resolved?
It's not going to work well in Outlook 2007+ either because you're using non-compatible tags including padding: and display:. So, back to the drawing board all around. Here's a refresher on what the various browsers support: http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_27_Aug_2009.pdf
Technically, the code you posted is invalid because it starts with a <td> which has to be inside a <table> and <tr> to be valid. I'm suspecting you posted just a snippet, so perhaps providing the entire context would be best.