EOA Email Tip

Gmail App

Tips for coding email for Gmail App 6 and 6+.

1 Does Gmail support the "display" property?

Gmail does not support the inline display property if the value is set to “none.”

style="display:none"

Each of the other values for the display property are supported.

It’s important to note that Gmail does support the inline display property if the value is set to “none !important;” as below.

style="display:none !important;"

2 How do I get around the fact that Gmail doesn't support embedded CSS?

One way to get around this issue is to convert your embedded CSS into inline using our CSS conversion tool in the “Developer Tools” dropdown in each test result.

There is another way of getting around the issue for things like font, font color and font size: Gmail converts your Body tag to a DIV. That can actually work to your advantage because you can use any inline CSS properties within your BODY that would otherwise be supported by a DIV. It is important to know, however, that some clients do not support the BODY tag so you should also include the same declarations within your embedded CSS. Also, keep in mind, you can’t rely on BODY attributes like “bgcolor” because it is not supported within a DIV.

<head> <style type="text/css"> /*This is for all clients except Gmail, Gmail gets the same declarations from the body tag */ table, tr, td, p, span { font-family:Arial, Helvetica, sans-serif; color:#333; font-size:11px; } </style> </head> <body style="margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:11px;"> Content </body>

3 My vertical spacing is not showing up.

Gmail converts this:

<td style="height: 20px;"></td>

To this:

<td style="min-height: 20px;"></td>

The min-height property does not have the same effect as the “height” property in TDs. This seems to have a universal effect in all browsers. By adding a space or a
inside the empty cell, it resolves the problem.

<td style="min-height: 20px;"> </td>

4 The negative value on my margins and padding are not working.

Gmail ignores the entire margin or padding declaration if there is a negative value.

margin:-40px 10px 0 0 margin:40px -10px 0 0 margin-top: -40px margin-right: -40px padding-right: -40px padding-top: -40px

Gmail does support negative values in the generic padding property – this is not recommended however because Yahoo New and Classic do not support negative values at all.

5 Why aren't my backgrounds working?

If you include any reference to a URL, your entire declaration will be ignored.

For example:

background: #000; /*This will be accepted */
background: #000 url(https://www.test.com/test.jpg); /* This entire line will be ignored */

With that said, if you ever want to back up your background image with a color, be sure to do it within a different inline CSS declaration.

For example:

<td style=" background: #000; background: #000 url(https://www.test.com/test.jpg);">

Another option is to use the “background” attribute within your TDs.

<td background="http://www.test.com/test.jpg" bgcolor="#eeeeee">

6 Why doesn't my positioning work?

Gmail strips “position:relative” and “position:absolute” from inline CSS, as well as “left:”, “top:” and other positioning code. This is because positioning could move elements of the email outside of the viewing window.

7 I am using a small font and my line spacing is all messed up.

This is because of the Gmail DOCTYPE, try putting your font inside a paragraph tag instead of using a font or span. Another way to get around this is to define a line-height and/or font-size in the containing TD.

8 Gmail inserts a link around my phone numbers. How can I block this?

Both the desktop and mobile version(s) of Gmail now insert an anchor link around phone numbers. In the desktop version, the link opens Google’s new voice/chat console which is displayed along the right column of the Gmail interface.

To block this, use an HTML entity in your phone number that Gmail does not recognize such as “”

Â212-389-3934

In the above example we inserted this entity before each dash.

Click here for more examples and fixes.

9 Gmail is converting my email addresses and URLs to links.

Yes, if you have a URL or email address listed without a link, Gmail will add it for you. For example name@test.com within this paragraph will get converted to:

<a href="mailto:name@test.com"> name@test.com</a>

Here are two possible fixes:

1.) Insert an HTML entity that Gmail does not recognize, like:
Â

So change name@test.com to:
name@testÂ.com

Change www.mydomain.com to:
www.mydomainÂ.com

Change http://www.mydomain.com to:
http:Â//www.mydomainÂ.com

2.) Insert an anchor around the URL or email address and format it like the rest of your text. For example:
<a href='#' style="color:#000; text-decoration:none"> test@test.com</a>

10 My email is getting clipped in Gmail.

If your email exceeds 102K, Gmail will display the first 102K along with a message that reads:

[Message clipped] View entire message

When the user clicks to view the entire message, your email will be displayed in a new window.

If you are close to 102K, you might save a few bytes by removing any unnecessary spaces, carriage returns or comments.

We recommend that you avoid embed images or documents when sending HTML emails.

11 Why aren't my images showing up?

Gmail does not support spaces within image paths. Always use underscores or dashes.

If that doesn’t fix it, check to make sure you are using absolute image references.

If that still doesn’t fix it, Gmail might be having a problem with your Hypertext Transfer Protocol Secure references (https://). If so, try switching to HTTP.