I develop module-based email templates in Marketo with Marketo 2.0 syntax.
My client designed a fancy looking module where an image is overlapping 2 solid colors. If it were web design, no problem, but for email, not sure how to do this.
My only good idea is to do a table with row and column spans. Anything better out there? Do you think negative margins will work in email?
What they are asking it to look like:
My lines showing how i'd build a table to support it:
That's a good way forward (to use tables). Negative margins don't have great support.
You also cannot rely on colspan and rowspan because Outlook desktops on Windows don't support them. However, all you need to do for the section where you would use that is to nest a table.
I.e. instead of this for the middle section:
<table>
<tr>
<td bgcolor="xxx"> </td>
<td rowspan="2"> </td>
<td bgcolor="xxx"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
You would need to have one row like this:
<table>
<tr>
<td>
<table>
<tr>
<td bgcolor="xxx"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td> </td>
<td>
<table>
<tr>
<td bgcolor="xxx"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
You can fake absolute positioning and then use VML for Outlook support, see Steven Sayo's awesome Overlay & Email Absolute Positioning tutorial.
Related
As you recommend on this site, I´m using nested tables for my email templates and newsletters. But, I´ve a problem with the vertical align.
Code…
…
<td align="center" height="30px" valign="middle" >
<p style="font-family: Verdana; font-size: 16px;" align="center">
Here is the text
</p>
</td>
…
Now the explanation…
When I see it on my e-mail client (Thunderbird) I do not have problems.
When I see it on my outlook app on my android cellphone, I also do not have problems.
BUT, when I see it through the webmail of live.com, it respects the HEIGHT of the TD BUT NOT the valign attribute.
My question… Is there a universal way to align these contents vertically? If I was working on WEB, I know several, but, since all recommend TABLES for email templates, I´m stuck.
Any suggestion?
Thanks a lot.
Resolved:
Changing <p> for <span> and using valign (because vertical-align:middle does not work in all the platforms) I see the same on the app, on the live webmail and on thunderbird.
Build 3 rows
<tr>
<td height="10"> </td>
</tr>
<tr>
<td>Your content here</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
Probably need to use some line-height and mso-line-height-rule:exactly etc in there to make it consistent, but should force a middle vertical align cross all clients.
why don't you use try to use vertical-align in style?
it worked for me.
<td align="center" height="30px" style="vertical-align:middle; " >
<p style="font-family: Verdana; font-size: 16px;line-height:30px;" >
Here is the text
</p>
</td>
I changed styles.
I think p tag is not necessary here:
<td align="center" height="30px" style="vertical-align:middle;font-family: Verdana; font-size: 16px;line-height:30px; " >
Here is the text
</td>
The scenario is,
Click on a icon | which opens a popup;
Select a button from popup | where the selected buttons name to be loaded to a datatable;
Here, while running test suite fast, the particular popup opens, but the button is not getting selected.
But when running it in slow mode or executing textcase separately , it works fine.
i tried clickandwait, assert , etc., but i'm missing something important.
Is there any way to make it work while running it in fast mode?
This is the code,
<tr>
<td>click</td>
<td>id=btnPButton</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=FCode7</td> //This is the button id inside the popup.
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=RGrade</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=btnCC</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=btn12029</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=btn12039</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=HomeTeam</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=HJNo36</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=PlayerPosition</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=PlayerPosition45</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=btn12016</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=btn12004</td>
<td></td>
</tr>
There are a couple ways to fix this:
Do a waitForElementPresent on the button, then select it. That's usually the best way I've found to fix issues with elements not being displayed fast enough on the page.
You can set the speed during the test. Use setSpeed to set the speed fast during those sections of the test where fast works fine, if you run into a section where you need to slow it down, use setSpeed again.
Okay, here's what I would do, and have had success using this method:
click | id=btnPButton |
waitForElementPresent | id=FCode7 |
click | id=FCode7
You may want to add a pause after that to make sure it clicks before continuing the rest of the test.
Try waitforvisible (Xpath of the button) it will work
Hi i know this thread is old but I used waitForElementPresent and then put a pause and it has worked fine for me on fast
I'm having an issue where the following code displays fine everywhere, but gets interpreted by mail on an iPhone as a massive vertical space. Any help would be greatly appreciated. Thanks, Andy.
<!-- 20px Spacer -->
<TABLE border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD height=20>
</TD>
</TR>
</TBODY>
</TABLE>
I've found the following works for cross client vertical spaces:
<td height="20" style="height:20px;">
<div style="height:20px;width:1px;"></div>
</td>
I understand that HTML emails need to use really old school layouts - as per lots of other answers on SO (e.g. HTML email: tables or divs?, HTML Email using CSS).
However, there seems to be some debate over whether it's still a good idea to use spacer gifs in email.
For example, compare these three layouts:
DIMENSIONS:
<table cellpadding="0" cellspacing="0" border="0" width="100">
<tr>
<td width="100" height="10"></td>
</tr>
</table>
WITH SPACER GIF:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="spacer.gif" width="100" height="10"></td>
</tr>
</table>
WITH SPACER GIF AND DIMENSIONS:
<table cellpadding="0" cellspacing="0" border="0" width="100">
<tr>
<td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td>
</tr>
</table>
How do I use them with dimensions? Are there any email clients that still require spacer gifs? Is there any harm done either way?
Personally, I never use spacer gifs, because they destroy the layout when image blocking is turned off, for three reasons:
If they don't render at all, any layout that requires the spacer image is lost.
If they render incorrectly (such as reverting to their original size, or proportionally to their original size) they break the layout.
Even if they do render properly and the layout works, all the image placeholders that are displayed when image blocking is turned on distract from the message of the email.
To get around issue #2, you can save each image with its actual dimensions. However, this obviously increases:
Time to build
Number of images to be downloaded by client
and it doesn't solve issues #1 and #3.
The reason for using spacer gifs is because some clients (Outlook 2007, Outlook 2010, Lotus Notes, Hotmail / Live Mail) will not render an empty cell. It's very difficult to have absolute precision over dimensions of a text node, and so a spacer image suffices. However, even those clients mentioned will render an empty cell that has width defined.
So as long as you're defining pixel widths on any empty cells you are fine. To go back to the examples in the question:
Dimensions-only - works with and without image-blocking in all major email clients
Spacer images only - works only when image-blocking is turned off
Dimensions and spacer images - works only when image-blocking is turned off
Because of this, you should use dimensions and not spacer gifs.
Various articles talk about this question as well (search for 'spacer images' on the pages)
http://www.banane.com/workblog/?p=61
http://www.campaignmonitor.com/design-guidelines/
You can definitely avoid using spacer gifs.
I find that the following code works in all clients. I generally either specify the width or the height of these empty cells. This specific example is what I use to create vertical space:
<tr>
<td style="line-height: 0; font-size: 0;" height="10"> </td>
</tr>
If you keep your cells higher than 19px (the min default height of Outlook), you never need to use line-height, and a simple <td height="20"> </td> works great. Example:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
top
</td>
<tr>
</tr>
<td height="20">
</td>
<tr>
</tr>
<td align="center">
bottom
</td>
</tr>
</table>
But, for vertical spacing, in most cases you can probably avoid doing that and add padding into the row above or below:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
top
</td>
<tr>
</tr>
<td align="center" style="padding-top:20px;">
bottom
</td>
</tr>
</table>
or like this, without padding:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
top
</td>
<tr>
</tr>
<td align="center">
<br>
bottom
</td>
</tr>
</table>
Note on the last example I used <br> instead of just <br>. This is because Outlook will collapse any line or cell that has no content in it. That is the same reason why the original example also has a in the spacer cell. If you were to add multiple rows or padding underneath, it would look like this:
<td align="center">
<br>
<br>
<br>
bottom
<br>
<br>
<br>
</td>
There are a couple of benefits of the two options without the spacer cell. First is that it is quicker and contains less code. The second is that it renders more consistently when someone forwards your email out of Outlook. Outlook's fabulous MS Word engine wraps everything in <p> tags, which add an unavoidable gap between rows. Having one less row will keep your email closer to your original design.
Note: Outlook 2007/2010 treats empty cells as spaces. AND applies default text and background color attributes to them. (so if your user likes purple backgrounds, cells with no color come out with purple background peeking through).
To offset this format your empty spacer cell this way:
<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")> </td>
I normally use CSS rules for margin:0 auto along with a 960 container for my standard browser based content, but I'm new to HTML email creation and I've got the following design that I'd like to now center in the browser window without standard CSS.
http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html
I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to width:100% and using some inline style for text-align:center on the tbody or something like this to do it?
Is there a best practice for this?
Align the table to center.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
Your Content
</td>
</tr>
</table>
Where you have "your content" if it is a table, set it to the desired width and you will have centred content.
For googlers and completeness sake:
Here's a reference I always use when I need to go through the pain of implementing html email-templates or signatures:
http://www.campaignmonitor.com/css/
I'ts a list of CSS support for most, if not all, CSS options, nicely compared between some of the most used email clients.
For centering, feel free to just use CSS (as the align attribute is deprecated in HTML 4.01).
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align: center;">
Your Content
</td>
</tr>
</table>
table align="center" ... this aligns the table center of page.
Using td align="center" centers the content inside that td, useful for centered aligned text but you will have issues with some email clients centering content in sub level tables so using using td align as a top level method of centering your "container" table on the page is not the way to do it. Use table align instead.
Still use your 100% wrapper table too, purely as a wrapper for the body, as some email clients don't display body background colors but it will show it with the 100% table, so add your body color to both body and the 100% table.
I could go on and on for ages about all the quirks of html email dev. All I can say is test test and test again. Litmus.com is a great tool for testing emails.
The more you do the more you will learn about what works in what email clients.
Hope this helps.
Here's your bulletproof solution:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
<td width="35%" align="center" valign="top">
CONTENT GOES HERE
</td>
<td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
</tr>
</table>
Just Try it out, Looks a bit messy, but It works Even with the new Firefox Update for Yahoo mail. (doesn't center the email because replace the main table by a div)
I was struggling with Outlook and Office365. Surprisingly the thing that seemed to work was:
<table align='center' style='text-align:center'>
<tr>
<td align='center' style='text-align:center'>
<!-- AMAZING CONTENT! -->
</td>
</tr>
</table>
I only listed some of the key things that resolved my Microsoft email issues.
Might I add that building an email that looks nice on all emails is a pain. This website was super nice for testing: https://putsmail.com/
It allows you to list all the emails you'd like to send your test email to. You can paste your code right into the window, edit, send, and resend. It helped me a ton.
CSS in emails is a pain. You'll probably need tables unfortunately, because CSS is not greatly supported in all email clients.
That said, use an HTML Transitional DOCTYPE, not XHTML, and use <center>.
To center the table in the middle of the email use
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
Your Content
</td>
</tr>
</table>
To align the content in the middle use:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
Your Content
</td>
</tr>
</table>
In some cases margin="0 auto" won't cut the mustard when center aligning a html email in Outlook 2007, 2010, 2013.
Try the following:
Wrap your content in another table with style="table-layout: fixed;" and align=“center”.
<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
<tr>
<td>
<!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
</td>
</tr>
</table>