Css styles does not work in full view letter interface Gmail

Question

I create mail template in my job. I remember that Gmail started support css styles in 'head' tag. (spec.: https://developers.google.com/gmail/design/css)

I tried it and was disappointed. My letter is big because has a lot of data and Gmail cut off it and shown link for see full letter ([Message clipped] View entire message). My css style was applied to markup. But when I look at full letter by link I do not see styles - they are not applied.

Screenshot of problem

I need help. I think it's bug.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        /*
====================================================
== [START] == Reset styles
====================================================
*/
        #email_body {
            margin: 0;
            padding: 0;
            width: 100% !important;
            height: 100% !important;
            -ms-text-size-adjust: none;
            -webkit-text-size-adjust: none;
            background-color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
            line-height: 120%;
        }

        #email_body table, #email_body td, #email_body div, #email_body p, #email_body a {
            text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        #email_body table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        #email_body table, #email_body td {
            margin: 0;
            padding: 0;
        }
        #email_body img {
            border: 0;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }
        #email_body p {
            margin: 0;
        }
        #email_body strong, #email_body b {
            font-weight: 700;
            font-style: inherit;
        }
        #email_body i, #email_body em {
            font-style: italic;
            font-weight: inherit;
        }
        #email_body #outlook a {
            padding: 0;
        }
        #email_body .ReadMsgBody, #email_body .ExternalClass {
            width: 100%;
        }
        #email_body .ExternalClass, #email_body .ExternalClass p, #email_body .ExternalClass span, #email_body .ExternalClass font, #email_body .ExternalClass td, #email_body .ExternalClass div {
            line-height: 100%;
        }
        /*
        ====================================================
        == [START] == Hot Rules
        ====================================================
        */
        #email_body .pb-5{padding-top: 5px !important;}
        #email_body .pb-10{padding-top: 10px !important;}
        #email_body .pt-10{padding-top: 10px !important;}
        #email_body .fs-12{font-size:12px !important;}
        #email_body .fs-16{font-size:16px !important;}
        #email_body .fw-n{font-weight: 400 !important;}
        #email_body .fw-b{font-weight: 700 !important;}
        #email_body .wo-u{text-decoration: none !important;}
        #email_body .t-regular{color:#333 !important;}
        #email_body .t-additional{color: #999 !important;}
        #email_body .t-red{color: #cc373c !important;}

        /*Gmail anti-munged*/
        .content_wrap table.anti-munged {
            width: 100% !important;
        }
        /*
        ====================================================
        == [START] == Skeleton
        ====================================================
        */
        #email_body .content_wrap {
            background-color: #fff;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-text-size-adjust: none;
            font-size: 14px;
            line-height: 120%;
        }
        #email_body .content_wrap table,
        #email_body .content_table {
            font-family: Arial, Helvetica, sans-serif;
        }
        /*
        ====================================================
        == [START] == Line Data Table
        ====================================================
        */
        #email_body .blueHeader {
            font-size: 16px;
            color:#37809f;
            font-weight: 700;
        }
        #email_body .lineDataTable {
            border-bottom: 1px solid #ccc;
        }
        #email_body .lineDataTable.ldt-7-11 td {
            padding: 7px 0 11px 10px;
        }
        #email_body .lineDataTable tr > td:first-child {
            padding-left: 0;
        }
        #email_body .lineDataTable td {
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body id="email_body">
<table class="content_wrap" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
    <tr>
        <td align="center" valign="top" style="padding:20px 0;">
            <table class="content_table" align="center" valign="top" border="0" cellpadding="0" cellspacing="0"  width="100%" style="width: 100%;max-width:600px;" id="contentTable">
                <tr class="applyExtraSpaceBefore">
                    <td align="left" valign="top" class="blueHeader pb-5 pt-10">
                        Top Movers
                    </td>
                </tr>

                <tr class="extraSpaceAfter-30">
                    <td align="left" valign="top" class="pb-10 fs-16">
                        <table align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;" class="lineDataTable ldt-7-11 anti-munged">
                            <tr>
                                <td align="left" valign="top">
                                    <a href="#" target="_blank" class="wo-u t-regular">Stas (9123)</a>
                                </td>
                                <td align="left" valign="top" width="155" style="width:155px;">
                                    <a href="#" target="_blank" class="wo-u fw-b t-red">100<br><span class="fs-12 fw-b t-additional">09/02/2017</span>
                                    </a>
                                </td>
                                <td align="right" valign="top" width="70" style="width:70px;">
                                    <a href="#" target="_blank" class="wo-u t-regular fw-b">
                                       +900%<br><span class="fs-12 fw-n">Prior Value</span>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

For achieve situation when Gmail is clipping mail - you can add into template any data (for example this big data table) http://img.mtrc.in/mkBi

Assuming your mail template is not "exactly the same as in the spec", could you post your template? Guess it might help. — Nikolas, Sep 27 '17 at 09:18
I added foundation of template (html/css) and first element from data. Problem that 'full view' doesn't attach styles — Stanislav Ladnik, Sep 27 '17 at 11:06

score 0 · Answer 1 · answered Sep 27 '17 at 09:21

0

Its not a bug, its a feature (sort of) that Gmail had introduced some time ago. Any email sent to Gmail if its above 102kb in size the clipping will occur. Since your emails are clipping the email size must be above 102kb. Try any of the following:

Minify your CSS. Remove all unwanted spaces and lines breaks (just dont break the code)
Remove all classes not being used
Remove comments (if you are the only one using the template)
Reduce the number of tables as much as possible. if it can be done using 2 tables dont use more than 2.

You can read more about it here. if you had posted your code in someone would have given you pointers in fixing things.

Hope that is the answer you were looking for.

answered Sep 27 '17 at 09:21

Syfer

4,262
3
20
37

I understand why Gmai is clipping my email. I wrote that my email has a lot of data. It's normal and it's ok. I don't like and I don't understand why Gmail forgot attach my css styles to 'full view mode' =) How you can see on screenshot my styles was applied in 'preview' and didn't applied to full view. I think it's wrong behavior and I try to find confirmation of this – Stanislav Ladnik Sep 27 '17 at 11:15
maybe because the body tag gets stripped? Have you thought about that? Add in a table around your email and add the id to the td and see if that fixes it. – Syfer Sep 27 '17 at 11:57
Structure has all atributes id and class with some modification (modification - it's normal for gmail) http://joxi.ru/lbrRVafJGpj6r1?d=1 But document doesn't contain css rules from my template – Stanislav Ladnik Sep 27 '17 at 12:34
inline styles are missing? – Syfer Sep 27 '17 at 12:37
1

inline styles are working as expected. But question in this case about styles that included in head tag with style tag. – Stanislav Ladnik Sep 27 '17 at 12:39
From the code above it works, if you want further help please provide what all is needed for testing https://i.stack.imgur.com/u1UJG.png – Syfer Sep 27 '17 at 13:27
For test need add a lot of content for achieve situation when gmail is clipping mail. After this will appear link [Message clipped] View entire message. You need click on this link – Stanislav Ladnik Sep 27 '17 at 14:30
Use developer tools to see why your styles are not coming thru. I know about clipping I have been building emails for quiet some time now. If you want someone to troubleshoot your **full code** then paste it in your original question please. – Syfer Sep 27 '17 at 14:35
1. Oh. So strange. You aks me about inline style and shown to me how it's work in default view, but i wrote all conditions. 2. How you wrote in your answer - you will need only exceed the limit of template size. It has not dependencies from type of content. If you can not add any content then I am giving you big data table http://img.mtrc.in/mkBi You need only insert it into template 3. How I wrote before to you: 'document doesn't contain css rules from my template'. I watched the document by developer tools – Stanislav Ladnik Sep 27 '17 at 15:28
Your best bet will be to go inline so the styles stay. – Syfer Sep 28 '17 at 09:49
I currently have version with inline styles. And I want refuse from this, because all modern mail clients support this. But Gmail has this situation. Thanks for your help – Stanislav Ladnik Sep 28 '17 at 10:04

Css styles does not work in full view letter interface Gmail

1 Answers1