Cross HTML for all mailing

Question

Any idea why my styles isn’t read by gmail?

I would like to create this email type, for all available mailing systems.

FIDDLE DEMO

<center>
    <div style='border-style: solid; border-width: 4px; border-color: rgb( 0, 0, 0 ); background-color: rgb( 255, 255, 255 ); width: 644px; height: 276px; z-index: 1; top: 30px; position: relative;'>
    <img style='position: relative; top: -25px; right: 38%;' src='http://s22.postimg.org/nvlewer9p/100x100.png'></img>
        <div style="text-align: justify; position: relative; top: -50px; width: 65%; margin-left: 75px;">
        <p style="font-family: Arial; font-size: 16px;">Hey!</p>
        <p style="font-family: Arial; font-size: 12px;">Newsletter
        <br /><br /><br />
        Thank you!
        <br />
        Email
        </p>
        </div>
    </div>
</center>

Answer 1

From my experience with emails, none of the clients read divs very well. You're better off using tables to get the layouts of your emails.

When doing emails you need to stick the the SIMPLEST HTML you can, inline styles, etc.

Gmail is quite good when it comes to compatibility, unless it's imported fonts, it doesn't like fonts!

For your email layout, I'd split it into 2 rows.

Your first row would be an image, the whole width of the email, containing the top, say, 100px of that layout.

Under this, have your content with borders on the left, right, bottom, and style="padding-left: Ypx" Y being the distance between the left border and the start of the text.

(Yes, padding does work in HTML emails, but not if they're responsive.)

I can give you more if you want, just let me know.

Answer 2

To answer your actual question, CSS position, top and right etc are not supported in Gmail. Reason being is that they don't want you position:fixed; on their web-based interface. This would break their page, so they limit what you can use.

Here is the CSS support chart (see PDF version for full chart)