Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styles not working in Gmail

I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).

I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.

HTML

<div id="OrderInfo">
  variable 
</div>

The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors

CSS

#OrderInfo table tr th {
  text-transform: uppercase;
  background-color: #737373;
  color: white;
}

This is working fine for yahoo, hotmail but not for gmail.

I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.

I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.

So I cannot keep a static table and cannot change the way it renders

like image 789
Dheeraj Patnaik Avatar asked Feb 18 '16 12:02

Dheeraj Patnaik


People also ask

How do I fix templates in Gmail?

In Gmail, select the "Templates" menu at the top of your inbox, find and click the Template you'd like to update, and then click the "Edit" button at the bottom of the window. Make necessary changes and hit "Save Template." To delete a no longer needed Template, click "More," and then "Delete Template."

Does style tag work in email?

In my own tests, as of 8/20/2022, Gmail supports elements with classes, and the use of the <style> tag, as long as it is in the <head> . Also, Gmail no longer strips out inline classes for elements.

Where is customize styling in Gmail?

On your computer, go to Gmail. In the top left, click Compose . At the bottom of the window, click Layouts . If you haven't used layouts before, click Customize styling.

Does Gmail strip CSS?

Gmail's Rocky Relationship with CSS Like most webmail clients, Gmail uses a preprocessor to strip any code from an email that could be a security threat or interfere with the rendering of the client interface itself.


2 Answers

gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head

Put them inline:

<div id="OrderInfo">
    <table>
        <tr>
            <td style="text-transform: uppercase; background-color: #737373; color: white;">
                <!-- .......... -->
            </td>
        </tr>
    </table>
</div>

As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.

The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).

The above is very general and may not be always true.

There are several resources online that gives advices and rules on how to make an html email or template.

Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client

like image 127
Paolo Avatar answered Sep 24 '22 06:09

Paolo


UPDATE 2018

GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style> in head, it even allow/supports the use of media queries.


OLD ANSWER

Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this

12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps

Here is what you could do:

<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>

like image 42
dippas Avatar answered Sep 24 '22 06:09

dippas