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/
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 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)
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! ;) )
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.