I'm almost done with a new email template for eblasts, I've used simple html with tables and inline css throughout. It renders fine in Outlook, and Yahoo Mail. But in gmail and while opening on mobile, two tables that I designed as buttons dimensions render differently. It doesn't seem to be reading the height. How could I get the dimensions to render at least closely across?
<table width="110" align="left" border="0" height="15" style="width:100px; background-color:#EEF1C2; margin-left:auto; margin-right:auto; text-align:center;">
Thanks for any suggestions.
Have you tried the CSS attribute min-height?
Related
I am hoping someone can help me out here.
MANY months ago, I came on here looking for an answer to why my email wasn't displaying at 600px on a certain email client(I can't remember which one but it's probably Gmail). I have been using the following code over the last few months:
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
style="margin: auto;" width="600px;" width="600">
<tr>
<td style="width:600px;" >
For the life of me, I cannot remember why the width is defined in both px and without px on the table. Then defined again on the TD in 600px. I've Googled it like crazy but no answers so far. Any help would be appreciated.
Setting the width of a table
In a nut-shell, there are two ways to set a width for table or its inner elements (e.g. tr, td, etc—which support width)
Using width property: as part of HTML spec, you can use width property as part of the markup. Like you have width="600" in your table tag. Please note, however, only numeric pixel value or percentage is valid (https://www.w3.org/TR/html401/struct/tables.html#adef-width-TABLE )
Using inline style property or CSS declaration: Like how you have style: 600px; in your td. Here, any valid CSS units can be used.
While it's typically considered a bad practice to use HTML markup for styling or/and rely heavily on inline styling, for HTML emails not only rely on both—often used simultaneously. Because, well, HTML emails are its own kind of beast.
Why table width doesn't render as intended
It's hard to answer with specific context. Table cells could collapse when there's no content inside, which might affect the widths of their containing elements. There might have been a typo. There might have been an invalid value used in a style declaration. There might have been a conflicting style definition. Or any number of other factors.
The only needed way to set a width on a <table> for an HTML email is to use an inline style.
<table style="width:600px; margin:auto; background-color:#fff;" align="center" border="0" cellpadding="0" cellspacing="0" >
This is the best way to do it because it will take into account The Outlooks on Windows at 120dpi rendering. This is also a personal recommandation of mine to prefer styles over attributes, which is why I moved the background-color in a style as well above.
The only exception to this is for images. The Outlooks on Windows don’t understand a width style on images, only a width attribute. So you always need to define a fixed width for Outlook on Windows in an HTML attribute, and then a fluid width in a style for other clients if you need it.
<!-- Bad example -->
<img src="example.jpg" alt="" width="100%" />
<!-- Good example -->
<img src="example.jpg" alt="" width="600" style="width:100%;" />
use 1 - 100 % at the place of px
I'm trying to create a 3 column grid for an email template that uses the liquid template language.
A lot of users use Outlook. I am trying to use a table for the grid which is working okay, but I can't get the images to look good. I either use a CSS command that doesn't render in Outlook or it looks really terrible.
This is what works but won't render in Outlook:
<td>
<div style="padding: 5px;">
<img style="width: 100%; height: 150px; object-fit: contain; object-position: center;" src="/images/logo1.png" />
</div>
</td>
How can I turn this 'sentence' into something that will render for all email clients.
It is generally bad practice to use <div> elements when working with HTML E-mails. You should refer to strictly using <table> layout instead to get your desired results. The reason for this is that many E-mail clients simply don't support anything else. Other than that, some E-mail clients will also ignore inline padding and margin styling on <img> elements, as well as some other specific stuff. It really all depends. Rule of thumb is, as long as you use a <table> layout, you're probably fine. For the most part anyways.
This old article covers some of the inconveniences with the <div> element in HTML E-mails.
Alternatively, check out this article on Outlook 2016 HTML E-mail tips.
I would also highly recommend navigating through this gem of a post if you're interested in learning more about HTML E-mails.
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
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'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