I am coding html email template , I did slice psd to html because of graphical work in template , now problem is that it looks perfect in my browsers but when I send it to my email id there are some problems that you can see in attached image
now this is <tr> with 3 <td> but problem is that there is gap between left blue image and logo right one is perfectly fine , code for this <tr> is:
<tr>
<td colspan="2">
<img src="left.jpg" alt="top_left" width="220" height="102" border="0">
</td>
<td colspan="2">
<a href="http://www.google.com">
<img src="logo.jpg" width="191" height="102" border="0" alt="Logo"></a>
</td>
<td colspan="3">
<img src="right.jpg" alt="top_right" width="200" height="102" border="0">
</td>
</tr>
Please let me know how I can fix it.
Also, make sure to always use this style on your images : display:block;
Some mail clients will do whatever they want with your code (Looking at you, gmail), and unless you specify that your images are rendered as block elements, it will add white spaces around those.
There are a couple of important fixes for gmail. Black links should always be colored as #000001 (gmail removes the black color on links, as well as on regular text for redundant content in conversations (It will turn this text purple when reposted unless you specify that the text color is #000001) ).
Also, make sure you use inline styling for your TDs height and width, sometimes the regular html value won't do.
Remove whitespace after a tag. Also make sure table have cellspacing, cellpadding and border set to 0. You might need to remove all whitespace in cells.
E-mail browsers are a mess. Much more then IE6 was ;-).
It may be an easier solution to just to use a single image if keeping the line together is important.
Unless you know what e-mail user agent each recipient is going to be using to view the e-mail, it is difficult to target them in the manner that you proposed. Each e-mail client may use a different renderer, causing them to display the whitespace incorrectly. There are times, when using older e-mail clients, that you will need to remove ALL spaces and linebreaks to get table-based formatting to display correctly; this means having all of the HTML on a single line.
Also, keep in mind that if your recipients are viewing the content in HTML5, the border attribute of the img element is obsolete; it is instead correct to add style="border: 0;" to the img element. You may want to try using style="margin: 0; padding: 0; border: 0;" on the table cells and rows.
Make sure that you have your table set to collapse as well, using
<table style="border-collapse: collapse;">
Related
I receive emails from Behave Annual inviting me to events. Came across something very weird on their newsletter. All buttons and some portions of text had CSS hover effects. On mouse hover, the color would change.
From my understanding, Gmail stripped anything added to the <head> portion of a HTML email document. Upon Inspect Element, I found the hover effect style to be loading from the <head> portion.
This is the DOM -
<table width="250" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;border-radius:4px" bgcolor="#C012C9" lang="x-cta">
<tbody
<tr>
<td height="52" valign="middle" align="center" style="vertical-align:middle;font-size:18px;text-align:center;font-family:Arial,Helvetica,sans-serif,'Work Sans';font-weight:bold;letter-spacing:.08em"><img src="https://ci4.googleusercontent.com/proxy/w_W_24g8lpz0y_rVlaX7m8vTQNv1CXL00edUPLYMHSwY8oEtD7ns-a-IWxZsBcjHrrFffonr-da-qa-_vITS05DwmYTE_IIv-Q7Yv_3TyoMmH8fNTqnTIKUFS0hyMCD5dcH2JQVnr6VpmkrOH5tgMTI3YeRG=s0-d-e1-ft#https://assets.bounceexchange.com/assets/uploads/users/700/38798606b59c4fe750c8af1b3c0e0461.png" style="display:block;margin:0 auto;border:0;white-space:pre-wrap;text-align:center" alt="LOOK INSIDE" class="CToWUd">
</td>
</tr>
</tbody>
</table>
The CSS inside <style> in <head> is as follows
div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
background-color: #c7dd40!important;
}
div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
background-color: #c7dd40!important;
}
How are they able to acheive this?
Google has updated support this year in email clients and now more is possible:
Gmail & Inbox support a rich subset of CSS properties & media queries to help you ensure that your message is formatted the way you intended...
standard <style> tags can now be included in HTML bodies, eliminating the need to use inline styles. source
Though I haven't found this in a Google sources, it also seems that :hover is supported only for part of the users.
Image from https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea#.upjtbzcjm
It also looks like some hack to get :hover working exists too: https://litmus.com/community/discussions/1275-gmail-app-gmail-webmail-and-inbox-metrics
I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.
Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.
As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
or
<style type="text/css">
#import "/stylesheet.css";
</style>
or
<style type="text/css">
body { color:green; }
</style>
To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.
With the remaining code, I'm unable to use #media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.
I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f
Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with #media tags, forget they even exist.
Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want.
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
The above works fine.
Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
Here are both examples in a JSfiddle.
http://jsfiddle.net/e8r9ky4x/
Looks like your style guide includes the use of some inline styles:
<p>Our studio is <span style="color:purple">purple.</span></p>
Define sections of text that require different HTML <div>
<div style="color:#FC8301">
<h3>This title.</h3>
<p>This is sentence.</p>
</div>
Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?
Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?
<td><style>/*rules are for quitters!*/</style>Stuff</td>
Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.
I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.
I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.
Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.
Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach
Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2
Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question
Im coding html newsletter and faced up with strange thing in gmail. Code:
<table cellpadding="0" cellspacing="0" width="700" height="122">
<tr>
<td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_top_border.gif"></td>
</tr>
<tr>
<td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_left_border.gif"></td>
<td valign="top" height="106" width="689">
some content
</td>
<td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_right_border.gif"></td>
</tr>
<tr>
<td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_bot_border.gif"></td>
</tr>
</table>
Gmail screenshot:
Screenshot from other email clients:
Any hints?
Your help would be appreciated.
It's a browser issue. When you put an image inside a table, the image should be an inline element, sitting on a text line. That means there will be space below it (for parts of a line of text that go below the baseline, ie. descenders) and GMail's rendering is ‘correct’.
However, in Quirks mode, as well as “almost standards” mode, an image that is alone in a cell behaves like a block instead of an inline element, so it doesn't get the extra spacing. It looks like the ‘other’ client is in Quirks mode, as it has reset the font size inside the table (a typical Quirks mode bug).
Normally you want to avoid Quirks mode at all costs, so you'd use Standards mode and fix up the img-in-table problem by setting CSS display: block or vertical-align:-anything-but-baseline on the <img> elements, or, better, dump the ugly layout-table and use some background images instead. However of course in a e-mail context your opportunities for styling are strictly limited.
So yeah, try setting style="display: block" on the images to try to make them display the same in Quirks vs Standards if you like, but be aware that this is the least of your problems when dealing with HTML mail. You will face much, much worse breakages than that. HTML e-mail completely sucks on every level; if you have any chance to get out of it, by just mailing a link to a proper web page, then do that.
In regard to the change of fonts, it somewhat seems like the 'other client' might show a non-HTML body and I think gmail supports HTML by default.
Have you set the content-data to be HTML?
For instance in c# you might need to set:
MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;
I'm building a template for an HTML email I'll being sending via .NET. I don't do this often and I know I have to stick to tables and inline CSS. I just sliced up some images and I have two that need to stack. I understand there are issues with this in terms of whitespace in the HTML code. As a result, I've tried it all on one line, e.g.
<td valign="top" style="width: 314px;"><img src="/i/header_logo.jpg" width="314" height="92" alt="Logo" /><br /><img src="/i/woman.jpg" width="314" height="617" alt="Woman" /></td>
I'm previewing this in my browser and the two images are separated by some space. I also have a global line of CSS resets at the top like:
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
</style>
Does anyone know how to stack two images in a <td> and have them flush against each other?
Update: It turns out I had a doctype at the top like a normal web page and that caused the issue. It had nothing to do with my HTML/CSS combo.
I figured out the problem. I didn't have a doctype defined and therefore the rendering mode was really messed up.
alternatively try align="left" on your images. Works in some email clients.
You could cheat, and embed another table within the column containing the pics.
<td>
<table>
<tr><td align="left"><img1 ...></td></tr>
<tr><td align="left"><img2 ...></td></tr>
</table>
</td>
Is that what you mean by stacked and flush?