Currently using http://backgrounds.cm method for background email generation. When not using the code, the email looks correct in most test. When the background image is added, Outlook 2013 will display it, but all the table formating expands to 100%. Not sure if I'm implementing it incorrectly.
Currently applying the background to the topmost table which contains several cells, not the entire body.
I've pasted the code here: http://pastebin.com/dX8zEZDV
I did a couple things to fix it:
Changed your doctype from strict to transitional.
Removed duplicate meta tags.
Closed all unclosed-tags (img and br tags).
Removed your outer two containing tables (#container_table and #container_wrapper).
In #container_table, removed min-width, added margin:0 auto and align="center" so table is centered.
In VML code section, replaced mso-width-percent:1000 to width:850px.
Updated closing VML tags to correct nesting order (closed prematurely).
Optional:
In VML code section, changed the color to better match your background (#292929).
The only instance I've found where VML background images and the inline fallbacks don't work is when I view my Outlook email using the Gmail app on Android. However, when I view my name#gmail.com email in the same app, it's fine. So in the event the background image doesn't load, the bgcolor will display so your users can still see your white text.
Note:
Always remember to validate your code. Even if there are some errors you can't fix (for instance the background attribute in the td won't validate), you can verify all your tags (minus any VML code) are nested/closed properly, as well as finding any accidental special characters you may have copied into your code from Photoshop or Word.
Updated source at jsfiddle: link
If table formatting expands to 100%, it's because you set "Table cell width" setting to "Full email width". It's best to use VML background images on fixed width and height table cells.
Ideal settings for backgrounds.cm are "A single table cell" and set width and height. Otherwise, the result might look different from non-Outlook clients (sometimes it's still OK if it's agreed upfront with stakeholders).
Related
I have a problem with my email signature. I can see it very well, but when the recipient sends a reply the images are very large and the css is no longer taken into account (I can see it in his return email). I do not understand why ?
Here is the code:
<img style = "width: 180px; height: 96px" width = "180px"; height = "96px" src = "liendelimage">
I tried two versions to put the size but in both cases it does not work!
Thank you in advance.
The syntax for your second width and height is wrong, e.g a spurious ; (semi-colon).
However, that's probably not the main problem.
Some email clients ignore styling, though inline styles as you have are more likely to succeed than separate CSS definitions in <head> for example.
Reducing the image size as suggested by #hamid will help in some cases.
However, some clients will ignore HTML altogether and even more will have images switched off by default so always show your name in plain text too.
I am trying to send an email with html content but I am observing displaying issues.
The following does not get displayed properly in width by Microsoft Office Outlook, any hint?
<div style="width: 650px; border: 1px solid blue">hello</div>
use tables, and on <td> use width="" propery and also style="width:" ... for some clients are reading the width property and others reads the style property
You must reconsider to change the email template to be tables within table and with inline styling
here is a sub link to problem which you may encounter
How to align several tables in td in center
HTML divs and spans don't work particuarly well in office outlook. You are better off using tables for this display.
Reference: "...The best way to combat these issues would be to use a table-based layout." https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients
Here is some further information taken from another answer:
"- JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to.
- Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.
There are loads of answers on SO, and lots of other links on the internet at large.
http://www.emailology.org/
http://www.email-standards.org/
http://www.campaignmonitor.com/css/
http://www.getfractal.com/ [DISCLOSURE - I used to work at Fractal.]"
Reference:
Has anyone gotten HTML emails working with Twitter Bootstrap?
I am trying to create an email template with HTML + CSS for GMAIL. It will be responsive!
But I know that "media queries" are not supported by gmail. So I am trying to create a "fluid layout" using old-fashioned HTML tags (table, td etc) and percentage instead of using CSS tags. I've already created a template (like here: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978) but still have a problem;
When I resize the browser I want -left column- to move at the bottom but now -right column- moves there.
How can I code so that left column will be at the bottom and the right one will be on the top of it. Is it possible to do it without using the "media queries" ?
Thanks,
This is can be caused by your tables being in the wrong order. Make sure the table with -left col- inside is placed underneath the -right col-. So long as the table wrapper is aligned to the left, it will still appear that way when viewed.
If that answer doesn't help, can you please provide a snippet of your HTML and I can take a look at what is causing the issue?
I've been searching for a character code or HTML tag to use in a div that takes up no space.
I don't have the option of hiding the div or masking the content, so I'm looking for any particular character or tag that would place content in the div, but show nothing and take up no space. (i.e. wouldn't be an option since it actually renders a character)
This div cannot be empty, thus nothing isn't a viable option.
http://en.wikipedia.org/wiki/Zero-width_space is one idea. in HTML. Not sure about cross-browser support though.
To create zero space, I use:
<img src="clearspace.gif" style="height:0px; width:0px; border:0px;">
One Example: Used when I want to have display as shown here, without causing browser to show it as a link. Written as below, all browsers show it as " <link> " without recognizing it as such.
<img src="clearspace.gif" style="height:0px; width:0px; border:0px; "link>
This requires that you have an actual gif (clearspace.gif or whatever you name it) uploaded to your site, otherwise there is a browser indication (small square) showing where the gif should be. And since it is rendered dimensionless by you, the actual gif can be anything.
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.