I have an email template that displays well in most email clients except that the it renders tables poorly in outlook.
There is too much spacing between the "tr" elements of the table in outlook desktop 2016. Please how do I fix this?
Attached is an image of what it looks like on outlook desktop 2016(i.e the problem) and how it looks in outlook web (What I want it to look like) respectively.
The entire source code can't be displayed in stackoverflow so I have shared a dropbox link to the HTML. https://www.dropbox.com/s/58i9scmnnmrqsix/EmailTemplate.zip?dl=0
Thank you.
Remove the font size for the coloured boxes and add the boxes as table with cells of different color and a specific height. You can use padding and align to center the tables in the parent cell.
OR
you can give the cell a line-height
<td style="font-size: 35px" align="right">
<span style="color:#275100; font-size:35px; padding-right:40px; line-height: 15px;">
■</span>
</td>
Cheers
Related
I am having an issue with outlook with my email template.
In all other email applications my template looks like, but outlook always left aligns my buttons. This is what I have:
<a style="display: block; text-align: right; margin-bottom: 10px;" href="-PRODUCT2URL-" target="_blank"><img style="display: inline-block" align-right src="https://marketing-image-production.s3.amazonaws.com/uploads/8b32ba0f98a4a49b628c0ccd072134aa3d287d9eb72a728573ec4f219a6139800392ddcc8413db10724b2c9070bee75141cc2ef7926f4af80372811faa299682.jpg" /></a>
Not only does outlook ignore the right align, but it also doesn't have the margin bottom.
Does anyone know how I can get outlook to allow me to right align this button?
Apply text-align: right; to the table cell where the href is located.
margin is problematic in Outlook. In the desktop 2011-16, it ignores margin, but will respond to Margin. So Margin-bottom will work, but margin-bottom is ignored.
For more information of the fun you will encounter with Outlook, check out these resources:
https://litmus.com/help/email-clients/outlookcom-margins/
https://www.campaignmonitor.com/css/
Good luck.
it is very much related to how you are structuring your email template:
while making a simple html page "div" is a basic building block that we user to structure the page,
but while building an html email template we need to user table as a basic building block, means we should use "table" and its child tags "tr", "th" for making an email templates. this will resolve most of out positioning issues.
I am creating an email template and i need to writte text in the "middle" of an image, but some email system's doesn't allow positioning, what can i use?
My HTML:
<img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background-5.jpg" style="width:400px; height: 350px;" />
<p style="color:blue;">SOME TEXT FOR CONTENT..</p>
example: https://jsfiddle.net/2zehs9f5/
If you're doing this for email, I'd recommend adding the text to the image itself, rather than positioning it with a background-image. The reason for this is that background-image isn't very well supported (particularly in Outlook 07/10/13) and will have to fallback to a solid colour, which may ruin the entire design.
I'd also move away from p tags, as they can render differently in different email clients.
Here's a JSFiddle of the finished code: https://jsfiddle.net/czxrp2hf/1/
Also, this link is quite helpful for finding out what CSS is supported in which email clients: https://www.campaignmonitor.com/css/
All in all Natalie has right.
If you want to try something like this:
<td valign="middle" background="your_image.jpg" width="100%" style="background-image: url(your_image.jpg)">
Your text here
</td>
should work in all major mailer (web and offline); except, as far as i know, Outlook 2007 and Outlook 2010.
Be aware that i put both the standard definition of background image AND the inline CSS one.
I have a <table> in an HTML template, in which I want to space cell only horizontally. I have tried using <div>s is not an option as email clients are harsh on styling. Using cellspacing spaces cells equally vertically, which is unwanted.
I am open for dropping table and use divs or any other tag, I couldn't find any. I basically have only two cells (and only one row) in the table, and want to space them away.
Is there any way of doing this?
I found a way of doing this. I just added another <td width="40%"> and it worked.
Css can achieve it:
<style>
td
{
padding-left:70px;
padding-right:70px;
}
</style>
Or if style tag doesn't work here is the inline CSS to do the same-
<td style="padding-left:70px; padding-right:70px;">
Demo
I've been tasked with creating a clean template for our HTML newsletter with circulates to about 70k subscribers. As expected, they're hoping for it to be as consistent across as many e-mail clients as possible, so I'm following widely suggested HTML e-mail practice and using nested tables and in-line style.
I'm trying to set a bgcolor to each <td> that displays an image - the reason being that if someone has the images on their e-mail client turned off, they'll still be able to see the shape of the table cells (and their experience will still be somewhat visual), but I'm having difficulty keeping the bgcolor within the cell, it seems to bleed into the space between cells. Here's an example:
<tr>
<td width="200" height="200" bgcolor="#CCCCCC">
<img src="image.png" height="200" width="200" alt="Image!">
</td>
</tr>
From this code, instead of the background being invisible under the image when the image is visible because they're both 200x200, I see about 10px of the grey pushing down into the bottom and right side of the image and intruding into the white space around the cells. What is going on and how can I fix this?
EDIT: Here's an image of what it's doing:
Have you set the css style of the table to border-collapse? Like so:
<table style="border-collapse: collapse;">
If that has no effect, and there is no margin on the images, have you tried setting padding to 0?
Have you set the cellpadding and cellspacing properties on the table tag?
http://www.w3schools.com/tags/att_table_cellspacing.asp
I want to send html body email like below with background-image css to my users :
<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
My Content
</div>
but as the link below says google does not support background-image css!
http://www.campaignmonitor.com/css/
what can I do about that?
Have you tried setting the background attribute of a table?
This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.
Example (Tested in Gmail)
<table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
<tr>
<td>
Email Content...
</td>
</tr>
</table>
You can't do anything about it. Using CSS to set background image is not supported in many web-mail application because of security reasons.
The only way to actually show background behind text is to create an image with text on it and display it using <img src="##" /> tag. Though, always remember to add link to text version of your email and/or link to web-page based copy of your newsletter.
Additoinally, you need to remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc.
Check out this page for few good suggestions: http://www.sitepoint.com/code-html-email-newsletters/
Also MailChip (probably most popular Newsletter management system) has few very good suggestions on how to code HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails
Update as of 2019. While there are issues with adding background image from inline image on the email (at least I did not find a way to make it work). Actually css-background image works fine on at least some elements as long as they are absolute urls to resource, my snippet that works on gmail as of June 2019:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">
This makes me wonder why it didn't work for the author. I have few theories:
a) back then it didn't work
b) it does not work on div elements
c) link was broken
d) missing single quotation mark
e) single and not double quotation mark around attribute style
f) despite the width and height on style, div was of 0x0 size
(Some of those above sound stupid)
What eventually worked for me is changing an image extension from .svg to .png
It seems Gmail doesn't support .svg images.