I have a HTML Email which uses tables to position everything - The background shows in a brouser when attributed to the table background tag but doesn't work in outlook - Is there anything anyone can suggest to do? I have tried putting it in CSS, etc but to no avail,
Much appreciated.
Outlook needs a chunk of Microsoft's VML code to render backgrounds in Outlook 2007 - 2013 since they use MS Word to render the HTML. Try this:
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td background="http://place-hoff.com/640/487" bgcolor="#000000" width="640" height="487" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:487px;">
<v:fill type="tile" src="http://place-hoff.com/640/487" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
You shouldn't be using background image properties in HTML Emails, especially Outlook.
Most email clients don't support this attrubute - some web clients will, but its best practise to stick to inline images.
Related
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'll post an example and wanted to know what are the solutions for the
selenium IDE operate in "modal" windows without stop the script. I will
provide an online example and the script that I built: Detail does not
work ...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base"
href="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/showModalDialog2.htm" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<td rowspan="1" colspan="3">New Test</td>
</tr>
</thead>
<tbody>
<!--//Open the application and wait to load the combobox-->
<tr>
<td>open</td>
<td>/workshop/samples/author/dhtml/refs/showModalDialog2.htm</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>name=oHeight</td>
<td></td>
</tr>
<!--//Insert height value and click "Push To Create" button-->
<tr>
<td>select</td>
<td>name=oHeight</td>
<td>label=250</td>
</tr>
<tr>
<td>click</td>
<td>css=input[type="button"]</td>
<td></td>
</tr>
<!--//Wait for the loading the modal page title and check the text -->
<tr>
<td>waitForElementPresent</td>
<td>//h1</td>
<td></td>
</tr>
<tr>
<td>verifyTextPresent</td>
<td>This is a modal dialog box. This page is not designed to do
anything except display the dialog box arguments.</td>
<td></td>
</tr>
<!--//close the screen and verify that the previous screen is loaded from the height field-->
<tr>
<td>close</td>
<td></td>
<td></td>
</tr>
<tr>
<td>selectWindow</td>
<td>null</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>name=oHeight</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Web applications don't actually have modal dialogs, with the exception of browser dialogs (e.g., "Save file as ...") and JavaScript's window.alert(), window.prompt(), and window.confirm(). Everything else is either a separate window (as in traditional web apps) or an overlay that blocks access to the elements behind it (as in modern, AJAXy, web apps).
In the case of a separate window, you need to waitForPopUp ...windowname... and then selectWindow ...windowname..., then selectWindow (without a name) to switch back.
In the case of an overlay, you can address it just like anything else in the page, but you may be surprised what the element locators may be (or maybe you won't be). Use Firefox's "XPather" or "Firebug" add-on to figure out the correct XPath expressions.
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>