I'm currenly working on an email in Mailchimp. I wanted an email that looked like this on mobile. Mailchimp's default behaviour is to stack images on mobile, so I had to get a custom code snippet to make this work.
It works on most devices, but on some (like Iphone 6s) I get the following behaviour.
Any ideas why this happens or how to fix it?
Here's the code that I used:
<table border="0" cellpadding="20" cellspacing="0" position="center" style="width:100%; max-width: 100px;" width="100%">
<tbody>
<tr>
<td width="70%"><a href="https://testlink.com" border="0" src="testimage.png"/></a></td>
<td width="0%"><a href="https://testlink.com" border="0" src="testimage.png"/></a></td>
</tr>
</tbody>
</table>
Related
In my spree app site, when the user purchases an item, I am sending an order confirmation email.
The email when opened is aligned on the left instead of center.
Here's the email template code which I am using.
I am not sure what do I do to make it open in the center.
Although while starting the table, I have given the align property like below.
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
Please help.
It helps me:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
Content
</td>
</tr>
</table>
Where you have "Content" if it is a table, set it to the desired width and you will have centred content.
I am writing a template for html email (God have mercy on my soul). The design looks simple enough — there is this centrally aligned block with some text and images:
Nothing too fancy, no multi-column layout or anything, and yet, I am stuck. Here’s what's giving me problems:
On desktop screens, the central block should be 480px wide.
On mobile phones, in portrait orientation (that's less than 480px), the central block should take the whole width of the screen
So my approach to this problem (borrowed from / inspired by other templates) was to create a table with 100% width, with another table inside, also 100% width, and a max-width of 480px, like so:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; max-width: 480px;">
<tr>
<td>
Some blah
</td>
</tr>
</table>
</td>
</tr>
</table>
It works on mobile. It works in browser clients. It works in Thunderbird. It works in Apple Mail. It makes me smile. But of course, Outlook can't do max-width, so it blows up the central block to 100% width.
So how could I modify my code to make this design also work correctly in that abomination that is Outlook?
EDIT: This is what I was getting on mobile phone screens in portrait orientation when I just set the width of the internal table to 480px:
Perhaps you can use this trick from elidickinson:
<!--[if mso]>
<center>
<table><tr><td width="480">
<![endif]-->
<div style="max-width:480px; margin:0 auto;">
...
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
May I suggest you do like this
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#f00" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="480">
Some blah
</td>
</tr>
</table>
</td>
</tr>
</table>
We have run into a problem with emails accessed through gmail using browsers on iOS only recently. We have a call to action button that we would like to center on the email. We have previously been able to do this using a table within a table and an align=center, but now it just doesn't work.Here's an example of the code I'm talking about:
<table width="551" height="51" border="1" cellpadding="0" cellspacing="0" class="mobile- content-size" style="min-width:551px;">
<tr>
<td height="51" style="text-align:center;" class="cta-one-row">
<!-- start button -->
<table border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="cta-show-them-table" style="color:#6a797b; text-decoration:none; background-color:#3b3b3b; border-radius:3px; width:230px;" height="50">
<tr>
<td align="center" valign="middle" height="50" style="color:#FFFFFF;" class="cta-show-them">CALL TO ACTION
</td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
Here's a link of what it looks like rendered on emailonacid.
Has anyone else run into this sort of problem or have a fix? It's rather important that these buttons are centered!Thanks!
So, typical question. I have searched a boatload here. Tried everything suggested. Nutin'
So Maybe to ask the question fresh.
I am having some verical gaps in Outlook 2013 (and 2007 too i think) between my image slices. (Also my text is extending further than it is set as)
Knowing that display:block doesn't really work for Outlook. I've tried wrapping in spans and giving the span a display:block
I'm at a loss. I'm hoping someone can answer this one easily. Grrrrr!!!! Outlook! Why must you be so popular?
http://pastebin.com/ESfEmWer
http://tinypic.com/r/2gtdhu1/6
Don't go for
display: [anything]
if you wish to include Outlook 2007. See http://www.xequte.com/support/maillistking/css_in_emails.html for reference of which CSS styles you can use and which you better don't.
Don't use any whitespaces trailing
<td>
and don't use any whitespaces preceding
</td>
And you should also avoid
<style>...</style>
as this will most likely will be striped away completely. Always go for inline-styles. And I know that this is not part of a real answer, but just as a hint: If you are doing HTML newsletters make them as if you were doing them for Internet Explorer 4. E-Mail clients like Outlook use the most ridiculous CSS-renderer you can imagine. Even Internet Explorer 5 is more sophisticated in rendering CSS then modern Outlooks.
Oh, and by the way: If there is a chance that the recipients of your newsletter might read them online in hotmail, gmx or gmail then you should check them, too. You will stand in awe and wonder how those online clients handle your code and what they inject.
You have a ton of whitespace causing the gap:
<a href="mms://a1783.v167326.c16732.g.vm.akamaistream.net/7/1783/16732/0/QPS.Onstreammedia.com/origin/jjready2/%5bInbox%5d/Talent%20Management/CDF%201-18_WMV.wmv">
<img style="display:block" src="http://emaniocreative.com/eblasts/3_26_2013/Message-from-Dominic-&-Louise.jpg" width="360" height="257" border="0" alt="Message from Dominic & Louise - Video"></a>
Try taking the whitespace out.. also display:block doesn't work like display:inline-block (the later you probably want instead) You cannot add formatting such as margin or padding to SPAN. I would keep what you have as IMG and DIV elements, however if you are using a TABLE you may want the border-collapse:collapse; property set.
Also to note, if you are using display:inline-block you will want to take out ALL whitespace between your elements:
<tr>...</tr><tr>...</tr>
Instead of what you have currently:
<tr>
...
</tr>
<tr>
...
</tr>
You have way too many colspans, which could cause problems. You should be nesting your tables instead.
I've created hundreds of emails and never had any issues with whitespace caused by line-returns in email code. (Outlook 2007 is the first thing I check my emails in)
It is always good practice to use display:block; and also keep images in their own <td> by themselves.
Try something like this instead:
<html>
<head>
<title>Ambassador Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>img {display:block}</style>
</head>
<!--REPLACE the following text with the path to the images on your server http://emaniocreative.com/eblasts/3_26_2013/ -->
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#ebebeb" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: collapse;">
<tr>
<td>
<!-- NEST A TABLE INSTEAD-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000">
<tr>
<td style="padding:20px;">
header
</td>
</tr>
</table>
<!-- /NEST-->
</td>
</tr>
<tr>
<td>
<!-- NEST A TABLE INSTEAD-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:20px;">
Body section 1
</td>
</tr>
<tr>
<td style="padding:20px;">
Body section 2
</td>
</tr>
</table>
<!-- /NEST-->
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
In my example I used padding instead of cells for spacing.
You never need a blank spacer image. Use a in an empty cell instead if you prefer not to use padding:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000">
<tr>
<td height="20" colspan="3">
</td>
</tr>
<tr>
<td width="20">
</td>
<td width="610">
header
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="20" colspan="3">
</td>
</tr>
</table>
On a side note, there is an unavoidable issue with vertical separation when forwarding from Outlook to Gmail for example, (courtesy of mso.normal p tags added) but for the initial recipient there are no problems.
I'm working on optimizing HTML emails for mobile devices. I have been tasked with finding a universal solution for creating a 2 column to 1 column responsive layout. I found an article written by Campaign Monitor - http://www.campaignmonitor.com/guides/mobile/responsive/. I've tried their markup and it works on most clients and browsers with the exception of Outlook 2007, 2010, and 2013. I've provided a jsfiddle link with my markup for reference. Is there a way to make this work in these version of Outlook?
EDIT: I'm not trying to make the responsive part of the email work in Outlook. I want the 2 tables ( Left & Right in the jsfiddle example) to display next to each other rather than stacked on top of one another. This works in Gmail (IE, FF, Chrome, Safari), AOL (IE, FF, Chrome, Safari), Yahoo (IE, FF, Chrome, Safari), Hotmail (IE, FF, Chrome, Safari), Apple Mail 4 & 5, Outlook 2003, Android 4.0, iOS 4, 5, & 6. My concern is only with Outlook 2007 and later when the rendering engine changed.
<html>
<head>
<style>
#media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody>
</table>
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #bcbcbc;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</body>
</html>
http://jsfiddle.net/bxdUp/
Have you tried adding align="left" and align="right" to the stacking tables?
See updated fiddle: http://jsfiddle.net/bxdUp/1/
You currently have the right table with align="left", but I have had success with Outlook table alignment manipulating the align value.
For anyone that comes across this SO and is looking for a solution to the above problem where the responsive 2-column content is ALSO centered I found that using conditionals to define columns only for Outlook made my world 1^300 easier. Of course it is no longer responsive in Outlook, but really... F Outlook.
<!-- define a 100% width table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="100%" style="text-align:center; background-color:white">
<!-- define a fixed width table using a class for responsive. I found that defining an arbitary height seemed to be important ~ silly Outlook -->
<!-- align center -->
<table cellpadding="0" cellspacing="0" class="fixedWidthTable" border="0" height="300" align="center">
<tbody>
<tr>
<td>
<!-- align left (this renders as float:left in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
<!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
<!--[if mso]></td><td><![endif]-->
<!-- Brilliant. -->
<!-- align right (this renders as float:right in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="right" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
</td>
</tr>
</table>
... close outer tables etc.
I've found that reductions in table widths by a few pixels work in the case for Outlook, which I can only assume is Outlook rendering pixel widths differently than other email clients.
Not ideal, but it has worked for me.
I don't think that it is gonna work on Outlook versions. Because first of all Outlook doesn't understand media queries. Outlook version 2007 is based on the rendering Engine of IE, while as Outlook version 2010 and version 2013 use Word as the rendering engine for displaying html emails. So I believe there is no way to get them to work in Outlook.
One more point is that when this code is executed in Outlook, it will ignore everything that is inside style tags. You should give style as inline for Outlook emails.