I have a client who wants to send gift certificates to people who sign up on their site. They want it all designed out, so I can't just send a text email. I'm trying to position text over the image so that it can still be dynamic.
I'm trying to do this with absolute positioning. Some email systems love it. Some hate it. Gmail happens to hate it.
We're using MailChimp for the campaign. Here is the full source of the email. Following that is just the snippet that isn't working.
<html>
<head>
<!-- This is a simple example template that you can edit to create your own custom templates -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head>
<body style="background-color: #bab145;text-align: center;">
<table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;">
<tr>
<td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
<div style="position: absolute; top: 110px; left: 130px;">
*|FNAME|* *|LNAME|*</div>
<div style="position: absolute; top: 140px; left: 130px;">
GetFreePellets.com</div>
<div style="position: absolute; top: 166px; left: 130px;">
$100</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|COUPONCODE|*</div>
</div>
</td></tr>
<tr>
<td id="footer" style="background-color: #eeeeee;border-top: 0px none #ffffff;padding: 20px;font-size: 10px;color: #333333;line-height: 100%;font-family: Verdana;">
<p>view email in browser | Unsubscribe *|EMAIL|* | Update your profile | Forward to a friend</p>
<p>*|LIST:DESCRIPTION|*</p>
<p>*|HTML:LIST_ADDRESS_HTML|*</p>
<p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p>
</td>
</tr>
</table>
<span style="padding: 0px;"></span>
<center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
<td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
Sent to *|EMAIL|*. Unsubscribe |
Update Profile |
Forward to a Friend
</td>
<td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
*|REWARDS|*
</td>
</tr></table></center></body>
</html>
And just the snippet I'm worried about:
<tr>
<td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
<div style="position: absolute; top: 110px; left: 130px;">
*|FNAME|* *|LNAME|*</div>
<div style="position: absolute; top: 140px; left: 130px;">
GetFreePellets.com</div>
<div style="position: absolute; top: 166px; left: 130px;">
$100</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|COUPONCODE|*</div>
</div>
</td></tr>
Note: MailChimp merge variables are those things between | and |.
Here is an image of what it looks like in Entourage. The red bar is a real name, so.. ya:
Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
And here is it in gmail (I know the name isn't censored):
Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
Any ideas on how to get this working in gmail?
Unfortunately, you can't use position: absolute.
Also, because Outlook is using the Word HTML renderer, you will also run into problems using absolute positioning.
Most HTML emails are laid out with tables.
Check this out.
Please note that is not a foolproof solution. I had some problems with it on Outlook and need to disable it.
So first of all you need to set a container to position against.
<div style="width:300px;height:300px;">
</div>
Then place an element inside that, set display as inline-block and position it with margin-top and margin-left.
<div style="width:300px;height:300px;">
<div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
</div>
</div>
N.B. Unfortunately negative values in the margin won't work in Gmail, Outlook.com or 365.
The element is now behaving similar to position:relative but we want position:absolute so as not to affect the flow of any neighbouring elements. To achieve this wrap the inner element in a div with max-height:0;max-width:0 this now mean that div takes up no space on the page, but the overflow can still be seen.
<div style="width:300px;height:300px;">
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
</div>
</div>
</div>
You can now place multiple elements in that container and position them absolute. In this example I've added outlines and semi transparent background colours to clear display the outcome.
<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;">
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)">
1
</div>
</div>
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)">
2
</div>
</div>
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)">
3
</div>
</div>
</div>
Outlook
Ok so it still doesn't work in desktop Outlook but it does work pretty much everywhere else I've test.
But please do use this wisely. Do consider Outlook, perhaps a VML fallback or simply using Outlook conditional comments.
Source: https://web.archive.org/web/20170824110806/http://blog.gorebel.com/absolute-positioning-in-email
I would suggest doing the whole thing as a table (div support is not 100% reliable in email clients). Use border properties to give the table the green border. Insert the image of the logo/banner in the first row of the table (merged three columns). Use the next 3 rows for the To, From and Amount (with the values in the merged second and third columns). And use the last column of the last row for the cupon code.
If you really want the double border then you can either wrap the table in a div or for maximum compatibility, wrap the table in a 1 column, 1 row table.
Yes it's ugly but email clients have extremely buggy and/or old implementations of HTML so this is not the time or place to be squirmish about ugly, non-web2.0-looking code.
See the link posted by alex for more info.
(I know I'm answering 4 years later... but probably it will help somebody...)
If you look carefully, you don't have background images, you have possibly 10 images or more, many background colors and a complex table.
There's no image behind a text. You could divide your table and compose your background image as multiple image fragments, and match the text's background color with these images.
Really... in this template there are no "required" background images, just a complex table.
Related
I am trying to create the html structure of the phpmailer mailing and I want to send 3 divs side by side, but when I get the formatted email.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='display: table; width: 60%'>
<div style='font-size: 1vw; background-color: whiteSmoke; text-align: center; padding: 1vw; position: relative;'><b>PEDIDO DE ASSISTÊNCIA</b></div>
<div style='display: flex; align-items: flex-start;'>
<div style='width: 38%;'>
<p><b>Cliente:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Morada:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Código Postal:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Localidade:</b> xxxxxxxxxxxxxxxxxxx</p>
<p><b>Data do Pedido:</b> 21-11-2019</p>
</div>
<div style='width: 30%;'>
<p><b>Assistência Pedida Por:</b> xxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width: 25%;'>
<p><b>Nº Contribuinte:</b> xxxxxxxxxxxxxxxx</p>
<p><b>Contacto:</b> xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Email:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
</div>
Here it works and on the html page, but when I send the email and receive it in Outlook it appears unconfigured, I will show in the image:
The divs are not side by side as in the example I put above.
You're trying to use both javascript and relatively recent CSS (flexbox) in HTML for email. It's not going to work.
HTML in email is very limited, especially in Outlook, which, along with gmail, offers a horribly outdated and second-rate experience. You need to keep your formatting very simple (yay, tables for layout!), and test everything across multiple devices using services like emailonacid and litmus.
Developing HTML for email is extremely unpleasant, but welcome, I guess!
Since your layout is trying to emulate a table, it's probably easier to just use a table:
<table style='width: 60%'>
<tr style='background-color: whiteSmoke; text-align: center; padding: 1em; position: relative;'>
<th colspan="3"><b>PEDIDO DE ASSISTÊNCIA</b></th>
</tr>
<tr>
<td style='width: 38%;'>
<p><b>Cliente:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Morada:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Código Postal:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Localidade:</b> xxxxxxxxxxxxxxxxxxx</p>
<p><b>Data do Pedido:</b> 21-11-2019</p>
</td>
<td style='width: 30%;'>
<p><b>Assistência Pedida Por:</b> xxxxxxxxxxxxxxxxxxxxxxxxx</p>
</td>
<td style='width: 25%;'>
<p><b>Nº Contribuinte:</b> xxxxxxxxxxxxxxxx</p>
<p><b>Contacto:</b> xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Email:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</td>
</tr>
</table>
The text of every rss in the newsletter is going down and positioned to the left.
I tried to change to put two columns in order to avoid it, but then i'm couldn't get to change the column size and the text wrap down in mobile version.
<div style="text-align: left;">
<a href="https://contratocompraventavehiculo.co">
<img data-file-id="798535" height="60" src="https://gallery.mailchimp.com/fb081e42ac85d682d4bbec/images dd-8a84-47cd-b3e0-a23f612be.png" style="border: 0px ; width: 60px; height: 60px; float: left; margin: 0px 15px 0px 0px;" width="60" />
</a>
<span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">
<span style="font-size:16px">
<span style="color:#000000">
Become an expert
</span>
<br />
<a href="https://contratocompraventavehiculo.co" target="_blank">
<span style="color:#000000">
<strong>Discover new opportunities</strong>
</span>
</a>
</span>
</span>
</div>
In the next link you can view that the text is going down and not aligned with the first part of text: https://i.imgur.com/Pez3jGp.png
HTML code has changed a lot from how it started out 20 years ago.
At the beginning (20 years ago), we made tables. Tables for everything. These days we use <div> tags and <aside> tags - but back then, everything was in a table structure. To position things precisely, we put <tables> inside <table> cells. That is what you must still do - for emails only.:
<table>
<tr>
<td>
<table><tr><td>some data</td></tr></table>
</td>
</tr>
</table>
Also, tables in email support only limited CSS. And your CSS cannot be inside <style> tags - it must be inline, like this:
<td style="text-align:right">
Not like this:
<style>
td{text-align:right;}
</style>
References:
https://www.w3schools.com/html/html_tables.asp
https://www.sitepoint.com/how-to-code-html-email-newsletters/
https://emailmonks.com/blog/email-coding/step-step-guide-create-html-email/
In my program, I have a text element that displays in 2 different sections. It will display is section A, and again in section B (popup). I was hoping to create 1 object using CSS that could be used for both sections. That way I could call the same object to check this element regardless of where it is displayed. I can't seem to figure it out. Maybe its not possible, or maybe I need someone who has more experience with HTML and CSS to show me the light.
Here is the HTML for this element in section A when it is displayed
<td id="treeCol" valign="top" style="overflow: hidden; display: block;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section A when it is NOT displayed (hidden when section B is displayed)
<td id="treeCol" valign="top" style="overflow: hidden; display: none;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section B when it is displayed
<div class="blockUI blockMsg blockPage PopUp White" style="z-index: 1011; position: absolute; padding: 0px; margin: 0px; width: 1365px; top: 50px; left: 50px; text-align: left; color: rgb(0, 0, 0); border: 0px none; background-color: rgb(255, 255, 255);">
<div class="White" style="margin: 0px 20px 20px; display: block;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
Here is the HTML for this element in section B when it is NOT displayed (hidden when section A is displayed)
<div class="White" style="margin: 0px 20px 20px; display: none;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
To select the element in section A, I could use the ID and it will work
css=#selection
To select the element in section B, I could also use it's id and it will work
css=#dataAccessOrgSelection
I wanted to have 1 selector for this element, so I tried this. However, it selects both the displayed and hidden elements. So if I'm on section A, it will select the element for both A and B, even though B is hidden (and vice-versa)
div.orgSelection span[id]
Is there a way to have 1 selector for this element, that will only select the visible element? I could check for "display:none" in the style attribute, but I'm not sure how to do this when it is located in td for section A, and div for section B.
Okay, if I understand your question right, you need CSS selector valid for both A and B in visible state.
td#treeCol[style*=block] span#selection, div.PopUp>div[style*=block] span#dataAccessOrgSelection
A tiny explanation. Comma - is for logical OR in CSS selectors. Visible divs of yours have a part of their style attribute - block ([style*=block]). So for both selectors we find span with needed id being contained inside a visible div. If the sectors are not right enough, play with attributes a little more.
To be completely sure that your approach works, you should call the element location with this selector every time before checking its visibility to avoid StaleElementReferenceException, because, clearly, those elements are not the same
But, if I was you, I would check a specific logic and not the 'what if' case. You should know exactly when and what element should be visible.
As Alexander Petrovich mentioned, I would recommand to use to different element-selectors, because in my opinion, they are indeed different elements. In this case, you can find easy selectors with ids.
But if there's a valid reason for a one-selector-but-two-elements-constuct, you need to make clear, which parts of your dom may vary and which are stable. I'm not so firm with css, but I can give you some xpath expressions, if this helps:
//span[(#id='dataAccessOrgSelection') or (#id='selection')]
//span[#class='']
//span[contains(text(),'Select') and contains(text(),'org unit')]
//div[#class='orgSelection']/span
I guess you will be able to transform this xpath-selectors into css-selectors...maybe this pdf will help:
http://code.google.com/p/timger-book/source/browse/trunk/cheatsheet/Locators_table_1_0_2.pdf
I have one div that should contain text and bellow it one image.
I don't want that image to ever go out of that div. Just to the bottom.
That image maximum should be 128px.
But when text on top of the div is too large image should become smaller.
I have tried something but this stick image to the bottom of the browser:
<div style="width:250px; height:300px;background:#ff0000;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/></div>
<img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: absolute;
bottom: 0;
set left: 0;
height: 24px;"/>
</div>
Update
<div style="width:250px; height:300px;background:#ff0000;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>
hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
<img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: relative;bottom: 0;left: 0; height:100%;"/>
</div>
Update
http://jsfiddle.net/jjehN/
UPDATE:
For your needs use "float" instead. Remember to use the "clear" after floats so you dont break the page. Heres your code, working with textwrapping
<div style="position:relative;width:250px; min-height:300px;background:#ff0000;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
<img src="http://tools.android.com/_/rsrc/1306369561351/recent/miscellaneousimprovements-1/android_icon_128.png"style="float:bottom;
bottom: 0;left: 0; background:#0000ff;max-height: 100%;"/>
<div style="clear:both;"></div>
</div>
For making the picture shrink/grow. Use Javascript. Maybe jQuery will be easiest for you. Make a new tread here at Stackoverflow if you find any troubles using it.
Best Regards
Jonas
Try this:
<div style="width:250px; height:300px;background:#ff0000;position: relative;">
<div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>
hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
<img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: absolute;bottom: 0;left: 0; height:100%;"/>
</div>
I have a row of three images that are currently displaying just fine.
Now, I want to display two more images right below those three and I want them centered (it would kinda look like an upside down pyramid).
No matter what I do, the bottom row stays left aligned.
Here's the .css
.category
{
width:176px;
font-size:80%;
text-align:center;
float:left;
position:relative;
}
Here's the html:
<div style='width:95%; align:center'>
<div class='category'><a href='individual.php'><img src='images/individual.jpg' style="padding-bottom:0.0em;" border='0' alt='Individual Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
<b>Individuals</b></div>
<div class='category'><a href='community.php'><img src='images/community.jpg' style="padding-bottom:0.0em;" border='0' alt='Community based Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
<b>Communities</b></div>
<div class='category'><a href='/police'><img src='images/first_respond.jpg' style="padding-bottom:0.0em;" border='0' alt='Police and send Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
<b>Fire/Police</b></div>
<br>
<div class='category'><a href='business.php'><img src='images/business.jpg' border='0' alt='Electronic Crime Watch Alerts by Email and Text Messaging for Businesses'></a>
<b>Businesses</b></div>
<div class='category'><a href='utility.php'><img src='images/utility.jpg' border='0' alt='Phone, Cable, Water, Gas and Power Outage Alerts'></a>
<b>Utilities</b></div>
</div>
Here's were you can see the original three: http://www.neighborhoodwatchalerts.com/
Because I dont want the test page to show up in the search engines you can take the above URL and add index2.php onto it and see all 5 images.
Any suggestions would be appreciated!
If you set your category divs to have a css property of display:inline-block, they will obey the text-align: center rule of the container.
here's a fiddle
Markup example
<div class="container">
<div class="category"></div>
<div class="category"></div>
<div class="category"></div>
<br/>
<div class="category"></div>
<div class="category"></div>
</div>
Css
.container{
border: 1px solid #ccc;
text-align: center;
}
.category{
display: inline-block;
width: 100px;
height: 100px;
background: #ccc;
margin: 5px;
}
One quick way to do it is wrap the bottom two divs in another div and center that using margin: 0 auto;.
So something like
<div id="somethingWrapper">
<div class='category'><a href='business.php'>
<img src='images/business.jpg' border='0' alt='yada'></a>
<b>Businesses</b></div>
<div class='category'><a href='utility.php'>
<img src='images/utility.jpg' border='0' alt='yadayada'></a>
<b>Utilities</b></div>
</div>
css
#somethingWrapper{
width:352px; //or something close
margin:0 auto;
}
Fyi... the 0 in the margin might bring the two rows too close. You may need to adjust.