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.

<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>

Well.. some email systems ignore certain styles. And you also have some invalid HTML. — putvande, May 14 '14 at 12:10
what do you mean "isn't read by Google". Which part of it is being ignored? — msturdy, May 14 '14 at 12:10
@msturdy the image position is beeing ignored by google, and that affects my text position — user3629180, May 14 '14 at 12:12
ok, how can i set position in gmail? because the guide to css support says gmail doesnt support top, right, left position — user3629180, May 14 '14 at 12:17

score 1 · Answer 1 · answered May 15 '14 at 18:15

1

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)

answered May 15 '14 at 18:15

John

11,985
3
45
60

@user3127499 If you're in the mood for learning there's a lot more html email info [here](http://stackoverflow.com/questions/2229822/html-email-best-practices-considerations-and-how-to-write-code-for-outlook-gma/21437734#21437734). – John May 15 '14 at 18:21
yep great can you make that question protected its gives lot of good info – codefreaK May 15 '14 at 18:23

score 0 · Accepted Answer · answered May 14 '14 at 12:29

0

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.

answered May 14 '14 at 12:29

Mallander

336
3
16

Can you fiddle an example? – user3629180 May 14 '14 at 12:40
@Mallander padding has the same support in responsive as with fixed emails. If you are going fluid though (which is what I think you mean), you can still use % padding instead. – John May 15 '14 at 18:04
It's compatible on most email clients, however on the Gmail app (Android) it stops the email from going responsive or resizing, so I never use it for responsive emails. – Mallander May 16 '14 at 12:37

Cross HTML for all mailing

2 Answers2