2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Thank you for subscribing to our newsletter!</title>

        <style>
            img.img {
                z-index: -1;
                position: absolute;
                float:left;
            }

            .content {
                position: relative;
                z-index: 5;
            }
        </style>

    </head>
    <body>

        <div style="width: 750px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
            <img class="img" src="email.png" />

            <div class="content">
                <h1>Text<small>app</small></h1>

            </div>
        </div>
    </body>
</html>

When i send this newsletter to gmail for example, the z-index is ignored. what i want is the text over the img. But it will be rendered first the image and then the text.

Basically the z-index is ignored. this can be solved, or i can't use z-index?

anvd
  • 3,997
  • 19
  • 65
  • 126
  • Until the world stops using antiquated mail clients you basically have to write your html emails the way 1990 wrote websites. You CAN use z-index but many services will ignore it. Aside that, there's no use for float on an absolute positioned element. And you may want to specify top and left. Or try applying the image as a background image, but that is also up to mail clients to deliver. – Kai Qing Nov 05 '13 at 01:53
  • *sidenote:* not all email clients support CSS in ``; some will just strip it away. Use inline CSS for HTML emails. – Raptor Nov 05 '13 at 01:59

2 Answers2

13

Update: This list has been moved to here: Best Practices & Considerations when writing HTML Emails

You shouldn't use z-index, divs, position or float. Basically your whole approach to html email is wrong. Html email is a different beast to html for web. Here are some resources:

Small parts of the info in some of these aren't technically 100% correct (html email truly is a black art), but they'll get you 99% the way there.

Additional Support Guides:

You'll need to use VML to get background images working in Outlook also. Here are some VML links:

You should always inline your CSS in html-email. Here is a link to a list of CSS Inlining tools:

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
3

Gmail is the only client that does not support z-indexing, so it seems. http://www.campaignmonitor.com/css/

Maybe this is the core of your issue. Also, may I ask why you want text to appear over an image on an eblast? The simple solution is to have the image be the background of an element and just have the text inside of that. Any complicated markup will likely result in chaos for an email campaign.

Either photoshop the text into the image or have the image be the background.

invot
  • 533
  • 7
  • 30
  • 3
    Consider also that serving just an image increases the chance your newsletter blast will be seen as spam. You're encouraged to have a "healthy" text to image ratio, however you want to define that. – Kai Qing Nov 05 '13 at 01:58