I'm trying to send the image as position absolute with the html text behind the image but when I send it to gmail or other email it show image then in bottom the html text. The absolute css is not working.
Below is the template
<template name="welcome">
<html>
<head>
</head>
<body style="font-family: 'Roboto Slab', serif;">
<div class='container-fluid'>
<img src="http://qa.couchfashion.com/images/mailer.png" style=" position: relative;width: 100%;left: 0;">
<div style="top: -44px;position: absolute;z-index: 999999;">
<div class='mailer-name text-center' >
<h3 style=" font-size: 80px;"> Hey {{receiverName}} </h3>
</div>
<div class="mailer-content" style="margin-top: 120px;
text-align: center;
text-align: justify;
padding-left: 10%;
padding-right: 10%;">
<h1 class="text-center"> Welcome to the COUCH </h1>
<hr>
<h3 class="text-center"> How To use Couch? </h3>
<h2 class="text-center"> STEP 1 </h2>
<h3 class="text-center"> Browse Products & Articles </h3>
<p>Congratulations ladies! You've successfully made it to the first step of Couch. THis step is the
easiest
step. We are sure you will have great time browsing through our products and articles as we get you
the
best of them. We make sure best gets the best! </p>
<h2 class="text-center"> STEP 2 </h2>
<h3 class="text-center"> Collect things you Love </h3>
<p>
Hello again! So here we are on the second step. Well this is easy too. You just have to click on the
love
button to collect your favourite products and articles there. And there you go. You have your very
own
personalized collection. Woo-Hoo!
</p>
<h2 class="text-center"> STEP 3 </h2>
<h3 class="text-center"> Get Appreciation </h3>
<p>This is the best step. It will help you flaunt your beautiful talents ladies! People can see your
closet
and have a glance at your choice. Isn't that cool? You can promote your style and make it popular.
Let's
get started ladies!</p>
<h3 class="text-center"> Thanks for signing up </h3>
<h3 class="text-center"> All the Love & Regards </h3>
<h4 class="text-center"> Team COUCH </h4>
</div>
</div>
</div>
</body>
</html>
CSS position is not supported in most email clients (both relative and absolute). Best way to achieve this is by making the image a background image:
<table role="presentation" aria-hidden="true" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<tr>
<td background="http://qa.couchfashion.com/images/mailer.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<div>
<table role="presentation" aria-hidden="true" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 15%ont-family: sans-serif; font-size: 15px;">
>> Place your text layout in tables instead of divs <<
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
It's also still safer to use <table>s instead of <div>s for email, unless Gmail is the only client you have to support.
Ted is right in his answer regarding that table is the way for structuring in email HTML. His solution is supposed to work well.
The reason you use tables instead of divs is that rendering engines have limited support for many properties in divs. Eg. Word-based Outlooks do not support width and padding on div elements without which it is impossible to define layouts. However these properties are well-supported on td elements. That is why we have to use tables.
If you go on using this method, there are a couple of best practices you should also follow:
Set the cellpadding="0" and cellspacing="0" to avoid non-expected spacings by some clients.
Use only one class for a HTML element. If you use multiple, then only the first will be applied.
Don't use complex CSS selectors (eg. this will not work in Word-based Outlooks: .bg-brown td { ### CSS ### } . You should stick to simple class definitions.
Lastly, background images only work in Word-based Outlooks intd elements, when you apply them with VML.
The code below is an example for background images with text in front we use in our tutorial about background images.
<table cellpadding="0" cellspacing="0" border="0" width="100%"
style="width:100%;min-height:50px; height:50px;border: ###
BORDER PROPERTIES ###" background="### SRC of BACKGROUND
IMAGE ###">
<tr>
<td style="### FONT PROPERTIES ###">
<!--[if gte mso 9]>
<v:rect style="width:540px;height:50px;"
strokecolor="none">
<v:fill type="tile" color="#363636"
src="### SRC of BACKGROUND IMAGE ###" /></v:fill>
</v:rect>
<v:shape id="NameHere"
style="position:absolute;width:540px;height:50px;">
<![endif]-->
<p>table background="...." + vml fixed width background</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
Unfortunately, positioning is not covered, but it still may help to avoid some pitfalls. You can use Campaign Monitor's background tool to produce the VML code, or craft it on your own, based on corresponding tutorials.
Related
I'm struggling to find a cross-email-client way of stacking images on top of one another. I'm looking for something that would also work for Outlook. I am also using the inky templating language from foundation/zurb, although I can still write whatever html/css I want.
I had successfully used http://blog.gorebel.com/absolute-positioning-in-email/ trick of 0-width/height container with overflow to make it work on all other email clients, only Outlook is the bad child.
Has anyone got tricks to overlay images (not backgrounds) on top of one another in Outlook ?
EDIT
The target : https://imgur.com/a/xFq4d
As you can see on this image, the "header" of the card has two images : one classic avatar as a rounded image, and the same "avatar" has some filters applied and is used as background image with a special rounder corner
NOTE : I am the blurr filters/round corners are unavailable on some email client, we'll have alternative code to cope with that on those email clients that are not supported
The absolute positioning code I was using before (I am in the process of rewriting divs to use inky's rows/columns that transform the code to use tables
<div class="professional-card">
<div class="header">
<div class="absolute-wrapper">
<div class="avatar-background-wrapper absolute-in-wrapper">
<%= avatar_img(class: 'avatar-background') %>
</div>
</div>
<div class="absolute-wrapper">
<div class="avatar employee %> absolute-in-wrapper">
<%= avatar_img %>
<div class="firstname">
<%= model.user.first_name %>
</div>
<div class="company-name">
<%= model.company_name %>
</div>
</div>
</div>
</div>
<div class="content">
<div class="absolute-wrapper">
<div class="absolute-in-wrapper">
<div class="position">
<%= model.position %>
</div>
<ul class="tags">
<%= tags %>
</ul>
</div>
</div>
<div class="absolute-wrapper">
<div class="absolute-in-wrapper">
<div class="company-logo">
<%= logo_img %>
</div>
</div>
</div>
</div>
</div>
The absolute positioning SCSS code corresponding to the mentioned trick (that is automatically inlined in the message)
.absolute-in-wrapper {
display: inline-block;
}
.absolute-wrapper {
max-height: 0;
max-width: 0;
overflow: visible;
}
The only way you can get background images to work in Outlook is to use VML.
<div style="background-color:#ff0000; width:600px;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
</v:background>
<![endif]-->
<table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
<h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
Background Image with text on top
</h1>
</td>
</tr>
</table>
</div>
You can find most of this code at https://backgrounds.cm.
https://jsfiddle.net/wallyglenn/7zLaLrfx/
Rounded Corners
If you have a technique with rounded corners with Outlook, please post your solution. border-radius: does not work with Outlook 2007-2016.
Absolute Positioning
position: does not work in Outlook, Gmail or related email programs. Even the page where you posted about alternatives doesn't work in Outlook. The best way to overcome position issues is to design an email where it's not a requirement.
https://www.campaignmonitor.com/css/positioning-display/position/
Use Spacers
One alternative is to use spacer tables. This is one way you can add space.
<!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="8" style="padding: 0; mso-line-height-rule: exactly; line-height: 2px; font-size: 0;">
</td>
</tr>
</table>
<![endif]-->
Good luck.
I've recently started working on creating email templates, and have encountered some issues that I am not finding any explanation for.
I generated buttons from buttons.cm under the expectation that they would be bulletproof, and while they were great for most clients, they failed on web based outlook clients.
The results appeared like this (with slight modifications, explained later)
<table style="width: 100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td style="font-family: arial;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;font-family:arial;background-color:#72BC00;color:#ffffff;" arcsize="14%" stroke="f" fillcolor="#72BC00">
<w:anchorlock/>
<center>
<![endif]-->
Learn More
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
</table>
What I am aiming for is this:
Screen shot of working version
But what I get for all browser based outlook clients is this:
Screen shot of failed version
The problem being that in the failed version
cell padding fails
the buttons are not links anymore, in fact all the styles are taken from the button and applied to the parent table.
the first item is actually supposed to be the last, but it is moved to the top, and stripped of all styles, for no apparent reason.
Is there a solution for this? I have yet to find anything. Thanks!
What I've added to the generated button is: Cell padding, changed display from inline-block to table (fixes the buttons from being 100% width and allows centered text in outlook), and made the containing element a table, not a div.
Buttons.cm was a good resource, but it's getting a little outdated.
I support Outlook but try to avoid VML whenever possible. I currently use something like this:
<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<span style="color:#ffffff">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
All the are messy, but it's something all clients universally understand.
A second, simpler option is to use border-width to fake padding, like so:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
I am a button →
</td>
</tr>
</table>
</td>
</tr>
</table>
Some email clients (mainly Outlook) don't allow a border-width more than 12 or 15 pixels, and this only works with solid colors, so this some have some drawbacks.
More options for bulletproof buttons are on Litmus.
For #2, are you updating the URL in the VML code as well as the anchor tag? Outlook uses the URL in the VML for the link, not the anchor tag.
This causes a problem for a lot of link tracking systems in email, which is one of many reasons I avoid using these kinds of buttons. We've convinced most clients to go with plain CSS styled buttons, with the understanding that Outlook will loose the rounded corners.
I've been looking for answer for this for ages, either I can make the box link or the word but never both, however I think this may be the answer. I have sent out a few emails using it and it seems to work fine.
<center>
<table align="center" cellpadding="20px" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="padding: 15px;height: 60px; width: 100%" class="" ><br>
<br>
Find out more <!--[if mso]> <![endif]--><br>
<br></td>
</tr>
</tbody>
</table>
</center>
I want to set the image size to 100% inside of td.
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td background="http://source/bg.png">
<img src="http://source/logo.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
So I have a big td with bg-image and a logo on top of it with some text.I am doing css all in-line to be able to send html email.
The problem is that the image has it's natural size, and doesn't resize to 100% to fit the td size.
Firstly, emails are a pain when it comes to CSS / HTML Standards... Google will help you here.. In general.. Your best testing this with outlook/hotmail/gmail.. Outlook is one of the worse for supporting HTML Emails.
As for the code, have a look at this example instead: http://jsfiddle.net/82bd2fyh/
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td style="background-size:100% 100%; background-image:url('http://placehold.it/550x550');">
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
Please note though, background-size is only supported in CSS3, IE9+..
Otherwise another option is to use a normal image tag and stretch that to 100% then position with a z-index your content / a div over top of it.
Email Support Guide Line: https://www.campaignmonitor.com/css/
The above is also under the assumption you are talking about the background image and not the logo / img tag.
If you mean your img tag, then simply apply a style to it.. But do believe you mean your TD background image
Building on Mayem's answer, which is 100% right in almost all email clients, I wanted to add a bit more to it. This will not work in Outlook at all and has potential for issues with Gmail app.
1.) Outlook almost always forces actual size of the image, regardless of CSS or HTML resizing (size is also based on the PPI setting on your computer) so it is always best to size your images to fit what you want them to display at in Outlook and then control size for all other clients.
2.) Outlook does not support background image, so you will need to use VML to mimic this for outook - best place for that is http://backgrounds.cm/. It will do most of the work for you.
3.) Gmail does not read stylesheets, so the code will likely lead to a deformed version when displayed on gmail app - this is something you will need to work on from a design/layout perspective
4.) Margin-left and most of the code on the overlay content needs work for email HTML as it is not supported on many email clients.
See below code that is built from Mayhem's answer with some tweaks and the Outlook conditional VML added in.
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:960px; margin:0 auto;">
<tr>
<td background="http://placehold.it/960x550" width="960" height="550" style="background-size:auto 100%; background-image:url('http://placehold.it/960x550');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:960px;height:550px;">
<v:fill type="tile" src="http://placehold.it/960x550" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td> </tr>
</table>
simply change
<img src="http://source/logo.png" style="margin-left:35%;" />
to
<img src="http://source/logo.png" style="width:100%;margin-left:35%;" />
A more correct solution is to change
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
to
<img src="http://placehold.it/100/09f/fff.png" style="width:65%;margin-left:35%;" />
I have been working on this newsletter for a customer. Everything looks perfect and exactly the way I want it to. Even Outlook understands the newsletter but then.. Gmail.. I really don't understand what is wrong with Gmail in the browser. I have this piece of code.
<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td height="20"></td>
</tr>
<tr>
<td width="225" bgcolor="#e1822d" valign="top" align="left">
<div style="padding:12px 20px 0px 20px;">
<div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
<singleline label="Title">Tenerife</singleline>
</div>
<div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
<multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
</div>
</div>
</td>
<td width="425" valign="top" align="left">
<img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
</td>
</tr>
</tbody>
</table>
And in every other mail client it outputs like this:
But in Gmail and Gmail only it outputs with an additional size in the orange column:
I know it is silly to focus on but it really annoys me that my HTML code is bullet proof and even old Outlook mail clients can show it right but then Gmail twists it.
Does anybody know what I should type either in the inline css or head css or anything - to make Gmail understand?
Add display: block; to the image tag's style attribute or img { display: block; } if you have a <style> section anywhere and need to apply this to other images as well.
For some reason Gmail adds extra margin to images that aren't explicitly specified as display: block.
Each mail client has different HTML rendering technique.
I can not really find out the difference from both the images. I see both images are identical.
From what I have understood, All I can say is, you can set fixed width inline in order to force Gmail to use your styling. !important can help you to force the styling.
Why is my gray div only showing half? This is my code :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white;background: #212121;" class="round" >
<center>
<h4 style="font-family: Verdana;font-style: italic;">Alumni Activities</h4>
</center>
<div style="margin-left: 10px;">
<p>
The institution has an alumni association that performs various activities to disseminate knowledge among students regarding Education, Technology, Trends and Industry. Apart from this, it organizes technical competitions for students to effectively develop their competitive skills and arranges alumni programs that promote effective networks amongst its members.</p>
<p>
Events organized by Alumni Association of are as given below:</p>
<table align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="40">
<p>
1.</p>
</td>
<td valign="top" width="363">
<p>
<strong>Event Name: </strong>Alumni Meet 2010</p>
<p>
<strong>Date of Event: </strong> 27-Feb-2010</p>
<p>
<strong>Purpose: </strong> Annual General Meeting and Get together</p>
<p>
<strong>Number of Alumni Present: </strong> 75</p>
</td>
</tr>
<tr>
<td valign="top" width="40">
<p>
2</p>
</td>
<td valign="top" width="363">
<p>
<strong>Event Name: </strong> Expert Talk</p>
<p>
<strong>Name of the Alumni: </strong> Mr. Nachiket Patel, Essar Ltd.</p>
<p>
<strong>Date of Event: </strong> 22-Sep-2009</p>
<p>
<strong>Purpose: </strong> To enhance the knowledge of students</p>
</td>
</tr>
</table>
<p>
</p> </div>
</div>
</div>
It looks to me like the classic 'collapsed parent' problem, created by a floated element. In your case it's the align=left attribute on the table.
Removing this attribute is the easiest solution, otherwise there are four CSS solutions, although one of the main two should work for you:
Either add the css overflow:hidden to your main div, or add a clear float, e.g. <div style="clear:both;"></div> as the last thing inside your main div.
This article explains the theory and the other two possible solutions:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
Problem was in messy align="left" property in table tag. See normal version: http://www.jsfiddle.net/pereskokov/UMUFt/1/
May I know the round class? I think the div is floated. When you use float div, you need to "clear:both" the div to clear the float element so the other tag won't float too.
First of all you are specifying the Transitional DTD level which is the highest level and requires apart of well formed document, that you use only HTML elements winch are accepted for such level, second you have a div that is closed but not opened, third remove the align="left" attribute of your table:
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white; background:#212121;"
<center>
<h4 style="font-family: Verdana;font-style: italic;">Title</h4>
</center>
<div style="margin-left: 10px; " >
<table border="1" cellpadding="0" cellspacing="0">
<tr><td/>Cell Content</td></tr>
</table>
</div>