I'm designing a responsive email, and I have two tables in one <td>. The second table is not top aligned in Outlook 2007 and 2010:
Both tables inside a td have a pixel width but rest of the tables inside these two tables have width=%.
I tried align left and right, as well as style="mso-table-lspace:0;mso-table-rspace:0;" but it's still not working.
I ran into the same problem. I suspect it is due to Outlook using Word to render HTML and Word is getting confused and barfing up a page break.
I recommend placing each of the tables inside cells of a parent table. Then apply your style to the cells of the parent table. Note that "float" is generally bad to use in HTML for email, but since it's in a media query means it's safe to use.
CSS:
#media only screen and (max-width: 500px) {
.floatLeftResponse{
width:100% !important;
float:left;
}
}
HTML:
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
<tr>
<td width="50%" valign="top" class="floatLeftResponse">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td> <!---bla bla bla this is your left column content-->
</td>
</tr>
</table>
</td>
<td width="50%" valign="top" class="floatLeftResponse">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td> <!---bla bla bla this is your right column content-->
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
Can anybody provide me with the code for this design? in the email template, I need to make this design. Text can be changed dynamically.
Email clients usually have poor support for properties like position or negative margin values. See:
Can I email… position
Can I email… margin
However, there’s a popular technique among email developers called “Faux absolute position”. The idea is to use max-height in a parent element to limit the space taken by children element in the flow. You can then position children element using positive margin values or text-align. You can read this article about it.
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;"><tr><td>
<![endif]-->
<div style="max-width:530px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;">
<tr>
<td style="padding:0 20px 20px; border:1px solid #eee;">
<div style="max-height:17px;">
<div style="margin:0 20px; padding:5px 20px; background:#fc2d6a; border-radius:5px;">
<p style="margin:0; color:#fff; font:16px/1.5 sans-serif; text-align:center;">
You’ve been referred!!!
</p>
</div>
</div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr>
<td style="padding:20px; border:2px dashed #fc2d6a;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
This wouldn't work as it is in Outlook on Windows and you’d need to add a VML fallback version.
I'm new to email template designs and I'm wondering why this is happening to my email template. The first screen shot is what I expect and the others are what is rendered in gmail, yahoo and outlook respectively. My concern is why is the logo not being aligned to the right as expected. I've also attached the corresponding code that shows the logo.
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="textContent">
<img align="right" alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /><br /><br />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
You have a lot of align center on the td's which need to be align right as the logo is in a table that is supposed to be aligned right.
I have added an extra table and made it the same size as the logo and aligned it right.
<tr>
<td align="right" valign="top">
<!-- CENTERING TABLE // -->
<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1">
<tr>
<td align="right" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="right" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="right" valign="top" class="textContent">
<table width="152" border="0" align="right" cellpadding="0" cellspacing="0" style="width:100%; max-width: 152px;">
<tbody>
<tr>
<td align="right"><img alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
Let me know if this fixes it. If this doesn't fix the issue then we will need more code to see if there is any conflicting class or ID that is causing teh template to go eider than the design.
Is this part of a hybrid or responsive email?
Cheers
If I specify Arial as the font for a table, will that cascade down as the default font for all cells/tables within the table?
E.g would this work consistently among popular email clients?
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>
Have just tested in Outlook 2013 and it fails miserably. Not sure how it fairs in the many other better clients but I guess if you want to support the shockingly bad Outlook the answer is to specify styles on every table cell.
It will work for some clients but not for all.. especially in Outlook 2010 and 2013. (same for the percentage of the width)
The best is always to specify the wanted styles and fonts for each <td>
like in the following:
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 13px;">
Another table - The text here will be formatted for all clients
</td>
</tr>
</table>
</td>
</tr>
</table>
Specifying the font in every new table tag should be sufficient. I'd just copy the style value from your initial table and reuse it for every child table.
You can specify styles on every TD if you want to, but unless something has gone badly wrong (or a new version of Outlook changes this) font styles will apply to all table cells until you enter a new table.
Something like:
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>
I may be missing something obvious but for some reason Outlook.com is overriding the margin and line-height for the P tag it conveniently wraps all images in. Any solutions to remove this unwanted space at the bottom?
<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
<tr>
<td valign="top" align="left" width="196" height="45">
<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
<tr>
<td style="font-size:0;line-height:0;border-collapse:collapse;border-bottom:1px solid #BBBBBB;padding:0;border-collapse:collapse;background:red;" valign="top" align="left" width="196">
<a href="" style="font-size:0;line-height:0;" target="_blank">
<img style="width:137px;height:44px;display:block;" src="" width="137" height="44" alt=""/></a>
</td>
</tr>
</table>
</td>
</tr></table>
put this in your header style tag:
p {margin: 1em 0;}
As the p tags are inserted at rendertime, you need to overwrite it in the style tag.
Composing e-mails in Outlook is a pain...I managed to get rid of the extra space between images by putting style="border-collapse:collapse; line-height:0;" in the TD tag and explicitly setting all width and height. And Don't forget to put style="display:block;" in your IMG tags to cover all clients.
<td width="400" height="100" style="border-collapse:collapse;line-height:0;"><img src="myimage.jpg" width="400" height="100" style="display:block; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;"></td>
You have to put the following into the head style part:
img {
line-height:100%;
}
Actually, outlook.com converts it into the following, but it will work!
.ExternalClass img {
line-height: 100%;
}
We use this solution at app.edmdesigner.com for images, and it works perfectly.
HTML email newbie here. Cannot believe how hard a simple thing can be in this arena...
I need a left-aligned, 1 pixel high, 350 pixels wide, colored line that I can put between lines of text in an HTML email.
Something like <hr align="left" style="height: 1px; width: 350px; color: #ff0000;" /> but of course that doesn't work in various versions of Outlook (I need to support 2003+) and Entourage (I need to support 2004+). (Other clients aren't giving me the same sort of grief, of course.)
Actual <hr>s are apparently untweakable in Entourage, so I've tried all sorts of things, including 1px high <p>s with a background color. Everything I try breaks somewhere.
Anyone have a bulletproof way to produce this simple line w/o resorting to an image?
There is no way around not using an image for this.
What you need to do is add a spacer image and a background color.
Im not sure how you have your email laid out, but if this was for me i would do something like this:
http://jsfiddle.net/ZsCwX/
<table cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="1px" width="350px" style="background-color:#F00;"><img src="image/spacer.gif" alt="" width="350" height="1" style="display:block" border="0" /></td>
<td height="1px" width="250px"><img src="image/spacer.gif" alt="" width="250" height="1" style="display:block" border="0" /></td>
</tr>
</table>
Try this:
<tr>
<td style="padding-top:30px;padding-bottom:30px;">
<table border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<td align="left" bgcolor="#ff0000" style="font-size: 1px; line-height:1px; color:#ff0000"></td>
</tbody>
</table>
</td>
</tr>