Absolute positioning in gmail emails

css gmail css-position
hookedonwinter picture hookedonwinter · Aug 4, 2010 · Viewed 62.3k times · Source

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?

Answer

alex picture alex · Aug 4, 2010

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.

Related questions

Styling HTML email for Gmail

I'm generating a html email that uses an internal stylesheet, i.e. <!doctype html> <html> <head> <style type="text/css"> h2.foo {color: red} </style> </head> <body&…

Read More
HTML formatted email not showing up at all in Gmail but is in other mail clients

I'm currently sending html formatted emails from PHP's mail() function and checking them simply to make sure they are showing up as HTML (formatting aside, I'm well aware that the formatting will vary (probably drastically) from client to client). They …

Read More
Why is Gmail blocking CSS in emails?

I used CSS in my email and sent it out. When I received the email in Gmail, all the CSS was disabled; however, when I retrieved the email in thunderbird or outlook, everything is OK. How would I fix this?

Read More