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>
Related
I have a header in my email with a logo on the right and some links on the left (all on one line). Works fine, but when viewed on a mobile device, the links on the left overflow to two lines.
I'd ideally like to have the mobile version display the logo on the top line and the links below it like the following:
DESKTOP:
Logo Link 1 Link 2 Link 3
MOBILE:
Logo
Link 1 Link 2 Link 3
How would I achieve this?
My code:
<table class="row header">
<tr>
<td class="center" align="center">
<center>
<table class="container" style="border-bottom: 1px solid;border-bottom-color:#bdc3c7">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="four sub-columns full-size">
<img class="left" style="float:left;width:180px !important;" src="#" width="180px">
</td>
<td class="eight sub-columns last full-size" style="text-align:right; vertical-align:middle;">
Link1</span> <span style="color:black;font-weight:100">Link2</span> <span style="color:black;font-weight:100">Link3</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
I'm not really sure what certain classes do in your html as I'm used to working with Inky, the templating language of Foundation for Email 2 but the work-around should be sort of the same.
Because of the way css works (cascading style sheets) you'll need to override the inline styles and the wrapping with a few !important lines in a media query at the top of your mail in the style tag.
For example:
#media only screen and (max-width: 480px){
td .example-class { width: 100% !important };
}
Or if you're using Inky only use the attribute large on your <columns> tag. Consequently, the small attribute will copy the value of the large attribute.
Your links'll be pushed under your logo as its container is taking up the full width.
To display your logo in the center (if you are using Foundation for Email 2):
.float-center class on the <img> element
align="center" attribute on the <img> element
Wrap the <img> with <center> tags (needed for Outlook 2007, 2010, and 2011)
Or when using Inky: A center tag around your img would be enough to do the job.
Source for aligning an img: https://foundation.zurb.com/emails/docs/alignment.html
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 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>