Gmail and Google Apps

The easiest way to get around this issue is to convert your embedded CSS to inline CSS using our “Inline CSS” conversion tool on the summary screen of each test result.

This is because of the Gmail DOCTYPE, and usually happens at smaller font sizes. 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>.

This space is actually caused by this client’s DOCTYPE.  Here are a few workarounds (these work in Gmail and Outlook.com as well):

1.) Add style display:block to the image element
<img src="test.jpg" style="display:block"> 

2.) Add align=absbottom in the image element
<img src="test.jpg" align="absbottom"> 

3.) Add align=texttop to the image element
<img src="test.jpg" align="texttop "> 

4.) Add line-height:10px or lower to the containing TD
<td style="line-height:10px"> 

5.) Add font-size:6px or lower to the containing TD
<td style="font-size:6px"> 

For more workarounds check out this blog article: 12 Fixes for Image Spacing

If your background style includes any reference to a URL, your entire declaration will be ignored in Gmail.

For example:

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

If you 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 a <td>.

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

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 does not support negative values at all.

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 

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> 

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 <td>s. By adding a space or a <br /> inside the empty cell, it resolves the problem.

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

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

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.

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.

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.

On wide emails, you may occasionally see an email that looks like it is hanging off the right side of the frame. In our web client previews (Yahoo! Mail, Outlook.com, AOL Mail, Gmail, etc), we intentionally modify the client’s styles to allow your entire email to be visible even if it is wider than the viewing pane. We do this because we can’t account for all of the possible email widths that may come through our system. No, this is not exactly what it would look like in the live client, but it enables you to see the whole email, as well as how much of the email would require horizontal scrolling to view. The part of your email that overlaps the right column would not normally be visible in a browser window of that width.

Gmail converts your body to a DIV.  This is extremely important because if there is no width set in your body, Android sets the width of your converted body tag to that of your viewport (horizontal or vertical).  So if you have a background color or image in the body of your email, you have a few options:

1.) Wrap the contents of your email in a table or div with the width set to the widest element in your layout.

2.)  Add an inline CSS width style to your body: 
<body style="width:800px"> 
The problem with this solution is that your email will now be left aligned in the web based Gmail client and the background color won’t extend to the left/right. 

IMPORTANT NOTE: *You must use ‘px’, ’em’, or ‘pt’ in either of these options – percentages will not work.

#1155CC is the default color for Gmail links. You can overwrite this color using inline CSS. However, Gmail ignores #000, #000000, and “black” values.  For example:

This will render as red:
<a href="http://www.w3.org/standards/" style="color:#C00">test</a> 

This will be rendered as the default (#1155CC) color:
<a href="http://www.w3.org/standards/" style="color:#000000">test</a> 

To fix this use a different hex value that is close to black:
<a href="http://www.w3.org/standards/" style="color:#040400">test</a> 

Underline
Links in Gmail are underlined by default. You can overwrite this style using inline CSS.

For example:
This will render with an underline:
<a href="http://www.w3.org/standards/">test</a> 

This will render without an underline:
<a href="http://www.w3.org/standards/" style="text-decoration:none">test</a>