Absolute positioning in gmail emails

css css-position gmail

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><a href="*|ARCHIVE|*" class="adminText" style="color: #800000;text-decoration: underline;font-weight: normal;">view email in browser</a> | <a href="*|UNSUB|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Update your profile</a> | <a href="*|FORWARD|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Forward to a friend</a></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|*.  <a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> |
        <a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> |
        <a href="*|FORWARD|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a>
    </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

Related

Setting attributes on a collection - backbone js
Why composite-id class must implement Serializable?
Multiple Authentication Providers in Spring Security
Notepad++ regex group capture
What are the differences between in .fsx, .fsi and .fs file in F#?
What is the performance of std::bitset?
Divinity Original Sin EE - Can the elemental forge be used for crafting?
On Minecraft, what do you do if the command is too long?
Can a Pokémon 'join' from nowhere in the Pokéwalker?
Is there any console that supports Java on their Internet browser? [closed]
Can i play FFXIV with my USA account on the physical EUR version on a NTSC (USA) Ps3?
What do I need to play Disney Infinity 3.0 on Wii U?