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.
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm developing an email where, by design, the banner image appears to be overlapping into the header. The effect is achieved by taking the top 35px or so of the banner image and making it its own image which sits in the row above the remainder of the banner image.
Here's a mockup with outlines of what I mean; the top portion of the image has a white background, while the rest of the image has a light blue background. The effect is that the image appears to be overlapping into the white.
mockup of email design
However, on some email clients (ran through the Hubspot tester) there's a gap between the images:
gap between images
I've tried the following, with no luck:
cellpadding and cellspacing = 0 to both tables
included table-collapse to my CSS
added margin-bottom to the top image (which only works on some email clients)
tried to valign="bottom" to the top image so it would sit on the bottom of the table
Here's the section of the email code, which works in the Hubspot preview, but not specific email clients:
<!-- TOP PORTION OF BANNER IMAGE -->
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" valign="center" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td cellpadding="0" cellspacing="0" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-top" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto;;margin-bottom:-5px' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END TOP PORTION OF BANNER IMAGE -->
<!-- REMAINDER OF BANNER IMAGE -->
<table bgcolor="#EDF1FC" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td valign="top" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-bottom" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END REMAINDER OF BANNER IMAGE -->
Are there specific ways I can get those images to align together across the board, outside of the methods I included above?
Fixed the issue by adding a style="display:block" to images.
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>
Im working with some already created code for an email footer. There is currently a background color behind the table, and I would like to switch this to an image. I have the URL for the image, but am not sure what format that should be in img src= or url(). I am a beginner so please don't judge (I didn't write this code, it is the source code from our email provider)
I have tried a few different ways with no luck and just erasing the background color.
Here is the current code where I believe this should be edited?:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ftrBG" style="padding: 5px; background-color: rgb(76, 78, 77);" align="center" width="100%">
<table align="left" border="0" cellpadding="1" cellspacing="30" width="100%">
<tbody>
<tr>
style="background-image: url('http://www.myimage.com/poops.jpg');"
You can use the background-image property.
http://www.w3schools.com/cssref/pr_background-image.asp
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.