Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Gmail Style Tag

pclark2

Newbie
Total Posts:  3
Posted: 13 December 2016 12:46 PM

I still haven’t been able to see Gmail supporting the style tag and media queries in the real world.  My personal phone runs Android 7 and runs the latest version of the Gmail App (updated earlier today even), and yet no test works.  I did an extremely basic test that works basically everywhere except Gmail.  Am I just missing something?  I’m still a novice at all of this.  Here is the test:

<html>
<head>
<title>test</title>
<style type=“text/css”>
body {
  background-color: green !important;
}
</style>
</head>

<body style=“background-color: red;”>
Green = Styles respected

  Red = Not
</body>
</html>

Thank you!


 

waterrf

Newbie
Total Posts:  9
Posted: 13 December 2016 05:09 PM
[ # 1 ]

It’s not working here because inline CSS styles always override CSS styles in the head tag.

Test it by using HTML to define the color in the body instead of CSS. <body bgcolor=“red”>

(I’m new posting here, so I’m linking to the attribute page on W3C, just in case the code doesn’t display: http://www.w3schools.com/tags/att_body_bgcolor.asp)


 

pclark2

Newbie
Total Posts:  3
Posted: 14 December 2016 08:06 AM
[ # 2 ]

Oddly for my Gmail app (Android 7 on Nexus 6) doesn’t like bgcolor on the body tag either.  Elsewhere sure, but not there even though inlined css works there.  Odd.  So I did more tests on things like tables and without any background mentioned anywhere in the body/html and only in the header, all with no luck in Gmail.

My best guess is Google is simply still rolling this support out and it hasn’t made it everywhere yet.  Sad.

And to be extra sure I did one other similar test which also did not work.  Here is that code:

<html>
<head>
<title>test</title>
<style>
  p{
      font-weight:bold;
  }
</style>
</head>

<body>
  Bold = Styles respected

      Regular = Not
</body>
</html>


 

pclark2

Newbie
Total Posts:  3
Posted: 14 December 2016 08:24 AM
[ # 3 ]

Ok this is interesting.  Found out the source of the problem!

It is not so much Gmail itself, but the address and how Gmail treats it.  My normal email is an Exchange Server one hosted by Office 365.  When I test it on a Gmail address, it does work.  So it appears Gmail is just not supporting this ability on addresses other than their own.  Strange.  And enough of a reason to still inline, especially with my customers.  And code I see working on Outlook.com and Office365.com aren’t working in the app, so it isn’t just Microsoft blocking it, but Google.


 

waterrf

Newbie
Total Posts:  9
Posted: 14 December 2016 09:15 AM
[ # 4 ]

I’m glad you posted that information about Exchange server, that would probably explain why my emails don’t display the way I’d like them to on my boss’ phone! It does show that—as you said—it’s still worth putting styles inline.