I've built an email which features images surrounded by a "polaroid" style border and caption. To do that I built a table around the image with white backgrounds and all works fine except on Outlook 2007 and 2010. Here's how it should look (Outlook 2011 version):
And here's how it displays in 07/10, pushing the tables out of the width of the page and increasing the width of the tables hugely:
Here's the code I've used - the tables are the only elements that cause problems:
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding: 9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td class="mcnImageContent" valign="top" style="width:164px;background-color:white;padding-right: 9px;padding-left: 9px;padding-top: 9px;padding-bottom:9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<table>
<tr>
<td style="max-width:160px;border: 1px solid #b3b3b3;">
<img mc:edit="product 1" class="mcnImage" width="100%" style="max-width:160px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" mc:edit="Caption 1" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;font-family: Helvetica;font-size: 11px;line-height: 150%;text-align: left;">
<center> </center>
</td>
</tr>
<tr>
<td valign="top" style="padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;text-align: left;">
<img align="center" height="18" src="http://gallery.mailchimp.com/004beaebbdbc9392458d4bde2/images/shadow.1.gif" style="height: 18px;width:100%;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Your table's width is being set to 100% [of its parent container].
<table ... width="100%" ...></table>
The full code hasn't been given, but I can only assume its parent has a width greater than that of the content above.
You can't reliably uses css classes or IDs within an HTML email.
You should only use inline css styles and even them keep them to a bare minimum to ensure maximum email client compatibility.
I don't think using the max-width property will be doing you any favours either. I'd recommend simply setting the actual width on height on the images using the regular width and heights html tags.
Here's a good reference for html emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Try using the following code (I suggest using this as an embedded style), this always fixes a lot of my Outlook 2007/2010/2013 spacing issues:
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
Related
I am attempting to include two images as a header in an e-mail, using pure HTML. One image will cover 40% of the screen width, and the other 60% width (the height for both is just auto). However, the max width for both images combined is 750px, so on large desktop devices, the combined width doesn't stretch further than that.
I learned of a trick involving setting td's to a width of 0 before and after the primary content, which works well for text, but not so well for my images. Here's my code right now:
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="0"></td>
<td width="40%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 40%;" /></td>
<td width="60%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 60%;" /></td>
<td width="0"></td>
</tr>
</table>
And here is how the images should be displayed
The code isn't working unfortunately; the images always get a fixed width. I've tried removing the empty td's, I've tried using fixed widths instead of percentages, I've tried using width by itself and as a style, I've tried all kinds of variations on putting the widths in different places, but seemingly no matter what I try, I am unable to display the images responsively, side by side. This is an issue on smartphone devices, where the images appear too large. Naturally, I cannot use media queries, as they are not supported in Outlook.
Any suggestions for how I could display the two images side by side responsively?
Thank you!
Best,
Javert
Try this One. Hope it Helps.
<div style="width:750px;">
<table style="width:100%;">
<tr>
<td style="width:40%; background-color: red; height:150px;"></td>
<td style="width:60%; background-color: yellow; height:150px;"></td>
</tr>
</table>
</div>
I was doing the same with mailchimp HTML/Code section, may be helpful for someone.
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageGroupBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" >
<tbody class="mcnImageGroupBlockOuter">
<tr>
<td valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;width" class="mcnImageGroupBlockInner">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="300" border="0" cellpadding="0" cellspacing="0" class="mcnImageGroupContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody><tr>
<td class="mcnImageGroupContent" valign="top" style=";mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img alt="" src="https://via.placeholder.com/300.png/09f/fff" width="300" style="max-width: 600px;padding: 0;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
<table align="center" width="300" border="0" cellpadding="0" cellspacing="0" class="mcnImageGroupContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody><tr>
<td class="mcnImageGroupContent" valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img alt="" src="https://via.placeholder.com/300.png/09f/fff" width="300" style="max-width: 600px;padding: 0;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
<!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
I'm using a table to fake a bulleted list in my HTML email. It looks great in every client except Outlook 2010, which adds extra white space between each row:
The table cellpadding and cellspacing is set to 0 and I tried explicitly setting the line-height in each table row.
The code:
<table width="100%" style="table-layout: fixed; margin-bottom: 21px; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
</tr>
</table>
The problem is the margin-bottom style applied to the parent table. Outlook applies that style to the child elements so each td has a bottom margin of 21px. Remove the bottom margin and use a blank table row to fake a bottom margin instead:
<table width="100%" class="list-table" style="table-layout: fixed; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
</tr>
<tr>
<td width="100%" height="21" colspan="2" style="border-collapse: collapse;"> </td>
</tr>
</table>
I appear to be getting a 1px white box around my tables in outlook 2007,10 and 13. Ive done border collapse and it hasn't fixed the issue? Want three 200px tables aligned horizontally, but because a 1px border is being applied it thinks they're more than 200px, therefore breaking the alignment. Tried everything so any suggestions appreciated.
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" width="600" bgcolor="#B6B6B6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#EE070B" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>1</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#1527EA" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>2</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#ED7407" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>3</td></tr>
</table>
</td>
</tr>
</table>
Outlook adds around 20px around Tables, no matter what. Not sure on the 1px border but try this hack to fool all Outlook versions into thinking your Tables are Table cells: http://labs.actionrocket.co/make_mobile_email_work_in_outlook
So I've been wrangling all week with a newsletter redesign for my company, tweaking the html to make it display semi-consistently across email clients. I've made good use of www.litmus.com for much of this. This is the last bug remaining and it continues to elude me. We have a horizontal navbar across the top. Here's a stripped down version with only one <td>, normally there are 5 of them:
<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle">
<tr valign="middle">
<td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >
<a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere">
<span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span>
</a>
</td>
</tr>
</table>
As you can see, inline styles up the wazoo. It displays fine on all of the litmus tests except for Outlook 2002, 2007 and 2013, in which valign="middle" gets ignored and the link text gets pushed to the top like this: http://i.imgur.com/a48ObB8.jpg
Several sources, both here and elsewhere, suggest that valign works in outlook, but I've tried the valign="middle" attribute on every tag I can think of, and several css vertical-align: middle;s as well. Is this no longer true? And if so, is there a work around of some sort?
I think the issue is the line-height you are setting. I found that when the line-height is equal to the td height, valign=middle will not work properly in outlook.
The following will not middle-align the text:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;">
Link Text Here
</td>
</tr>
</table>
THIS WILL:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;">
Link Text Here
</td>
</tr>
</table>
Valign always worked for me, but I think for it to work in Outlook 2007 you have to set the height of your <td>. This always worked for me:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2382a" height="35">
<span style="color:#FFFFFF;
font-family: 'Lucida Grande', Arial, sans-serif;
font-size:12px;
text-transform:uppercase;">
Link Text Here
</span>
</td>
</tr>
</table>
Short answer: Use padding-top, and padding-bottom with a negative value.
Long answer: If you want to write a cross-compatible email don't use valign at all. The problem you're having is stemming from somewhere else because by default the text should be displaying vertically centered in the cell.
Get your code back to a point where it's defaulting to the center and wherever you need something different use nested tables, cellpadding, margin, and padding to get the placement you're looking for.
I have this:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
This works on most of email clients, but not on Outlook version greater than 2010. To make it work correctly just add a conditional comment with a spacer like this:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!-- In this case is a spacer of 40px -->
<!--[if (gt mso 14)]>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top">
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
This is because of the align="right" set on the first table. Removing this should fix the issue. Other option is to manually add spacing before the first <tr>.
<tr><td height="30> </td></tr>
Wondering if it is possible to somehow specify a table cell's width in the form of a percentage less than 1%. In XHTML 1.0 strict, without the use of CSS.
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td width="70%">..</td>
<td width="0.5%"></td>
<td width="0.5%"></td>
<td width="29%">..</td>
</tr>
</table>
Is this possible? Is it valid? Does it work cross-platform? Anyone know of a way? When I attempt to use the code above, it appears to interpret 5% and not a half percent.
The template will be for consumption in email clients, not a web browser.
You could try taking the middle two at 0.5% and making a single TD at 1%. Then put a table inside at 100% and have two TD's each at 50%.
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td width="70%">..</td>
<td width="1%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="middle">
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</td>
<td width="29%">..</td>
</tr>
</table>
Use CSS.....
Try this!
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td style="width:70%">..</td>
<td style="width:0.5%"></td>
<td style="width:0.5%"></td>
<td style="width:29%">..</td>
</tr>
</table>