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>
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>
I am testing out an email template, in Outlook.com it does not align to the middle however on all others clients it does.
I have applied the following class below, but it didn't really help much, just cut off the header
.ExternalClass{display:inline-block; line-height: 131%};
Here is the whole template: http://jsfiddle.net/29mTG/
Any help is appreciated.
Thanks
Add align="center" to any table cell where you want the contents centered.
If you want something vertically centered, add valign="middle" to any table cell (the height="" must be set).
I can't find where exactly in your template would be causing the problem, but I've found the best thing to do is have a wrapper table with a width of 100% and a <td align="center"> and nest all of your content tables inside that.
ex:
<!-- Wrapper -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;" bgcolor="#ffffff">
<tr valign="top">
<td align="center">
<!-- Body Content -->
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left">
content
</td>
</tr>
</table>
</td>
</tr>
</table>
Also I saw that you were HTML encoding your font-family css, which won't be interpreted correctly.
All td's must have an align on them, so use align="center" as in <td align="center">CONTENT</td>
I centered the entire email by simply wrapping everything inside
<div style="text-align: center;">EMAIL SOURCE CODE GOES HERE</div>
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 am new to GWT and I am probably overlooking something simple. So what I am trying to do is in my html page I have created a layout for my page in the body tags:
<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">
<!-- Header row -->
<tr style="height: 25%;">
<td colspan="2" id="header"></td>
</tr>
<!-- Body row and left nav row -->
<tr style="height: 65%;">
<td id="leftnav"></td>
<td id="content"></td>
</tr>
<!-- Footer row -->
<tr style="height: 10%;">
<td colspan="2" id="footer"></td>
</tr>
</table
I have set Ids to everything so that I can get these items in the Entry point. So in my Entry point I try to populate these fields like this:
RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());
However I have learned through debugging that the RootPanel.get("header") is returning null. I am sure the rest are returning null as well, it is just crashing before it gets there. To my understanding this is the right way to do things, however I must have missed something. Please let me know what I am doing wrong or if you need more info. Thanks
Usually using div tags will work better than other types of elements such as <td>. Like the comments say, you should try to just use one RootPanel and then add then create your layout with GWT panels.
A very good way to layout a page like an HTML page is by using UiBinder. You can write out the layout using and XML language very close to HTML and at the same time use all of the useful GWT widgets. It's very useful to use and learn if you'll be building apps with GWT.
Try to use div tags in HTML:
<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">
<!-- Header row -->
<tr style="height: 25%;">
<td colspan="2"><div id="header"></div></td>
</tr>
<!-- Body row and left nav row -->
<tr style="height: 65%;">
<td><div id="leftnav"></div></td>
<td><div id="content"></div></td>
</tr>
<!-- Footer row -->
<tr style="height: 10%;">
<td colspan="2"><div id="footer"></div></td>
</tr>
</table
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>