Gmail and Google Apps
Coding tips and workarounds for the Gmail and Google Apps webmail.
1 How do I get around the fact that Gmail doesn't support embedded CSS?
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.
2 Why is my line spacing all messed up?
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>.
3 Why is there a small space under each of my images?
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
5.) Add font-size:6px or lower to the containing TD
For more workarounds check out this blog article: 12 Fixes for Image Spacing
4 Why aren't my backgrounds working?
If your background style includes any reference to a URL, your entire declaration will be ignored in Gmail.
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.
<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">
5 Why aren't negative values on my margins and padding 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
Gmail does support negative values in the generic padding property. This is not recommended, however, because Yahoo does not support negative values at all.
6 How can I stop Gmail from 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 firstname.lastname@example.org within this paragraph will get converted to:
<a href="mailto:email@example.com"> firstname.lastname@example.org</a>
Here are two possible fixes:
1.) Insert an HTML entity that Gmail does not recognize, like:
So change email@example.com to:
Change www.mydomain.com to:
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"> firstname.lastname@example.org</a>
7 Why isn't my vertical spacing showing up?
Gmail converts this:
<td style="height: 20px;"></td>
<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>
8 Does Gmail support the "display" property?
Gmail does not support the inline display property if the value is set to “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.
9 Why is my email 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.
10 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.
11 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.
12 Why does my email seem to be overlapping the right column?
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.
13 Why is my background getting cut off?
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:
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.
14 Why are my links blue and underlined?
#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>
Links in Gmail are underlined by default. You can overwrite this style using inline CSS.
This will render with an underline:
This will render without an underline:
<a href="http://www.w3.org/standards/" style="text-decoration:none">test</a>