Gmail reads CSS from head?!

I've noticed something strange in Gmail today. My inline style is overwritten by a style from the head css?!

the link with inline style:

<a target="_blank" href="..." title="Log in" style="color:#ffffff;text-decoration:none">Log in</a>

The css in the head:

a {
    color: #414141 !important;
}

What I see in firebug:

div.m13ff5fc2935f71aa a {
    color: #414141 !important;
}

Is this new and is it possible to use css from the head with !important or am I going nuts?

Redferret, 3 years ago

Interesting, does it read all of your CSS or specifically anything with !important?


Gmail app apologist
wilbertheinen wilbertheinen, 3 years ago

Specifically with !important


Create a Clang!
BenData2gold, 3 years ago

whoa!  if this is for real, and will move to their gmail app, this will change everything!

Redferret, 3 years ago

Sees to be isolated to a few different text styles, font-family, font-weight and colour confirmed, but font-style, display, text-align and line-height don't see work


Gmail app apologist
fhahnel, 3 years ago

font-size and border not showing in Android GMAIlL, working on Webmail client (Win Chrome)

roshodgekiss roshodgekiss, 3 years ago

Thought it's high time I chime in here, as I've been receiving lots of mixed results in my tests. First of all:

- There are subtle rendering differences between Gmail and Google Apps. If you could specify which Gmail version you're getting these results in, that would be awesome :D
- Crazy discovery: In Gmail (not Google Apps), many attribute selectors are working, as per campaignmonitor.com/css. This is indeed because *some styles* are being used from <head> - albeit with crazy class names appended
- To target Gmail (not Google Apps) with conditional styles, you can use:

div[id*=":"] /* your styles here */ 

Will keep testing, but keep posting your results here, too!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 3 years ago

By Google Apps are we referring to specifically mobile/tablet apps?


Gmail app apologist
BenjaminGraphics83 BenjaminGraphics83, 3 years ago

I think what Google Apps means is Google's platform for small businesses including custom email hosting, document collaboration sharing, etc, on a yourbusiness.com domain.

roshodgekiss roshodgekiss, 3 years ago

Yep, Ben is correct :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
torweb, 3 years ago

I'm trying the fix  roshodgekiss posted.  I added div[id*=":"] ul {padding-left: 0px !important;} to the style section in the head area.  It didn't seem to work.  I'm trying to move my unordered list to be flush left....now they're indented to almost mid page.

Am I using this wrong or in the wrong place.

Thanks

Redferret, 3 years ago
torweb :

I'm trying the fix  roshodgekiss posted.  I added div[id*=":"] ul {padding-left: 0px !important;} to the style section in the head area.  It didn't seem to work.  I'm trying to move my unordered list to be flush left....now they're indented to almost mid page.

Am I using this wrong or in the wrong place.

Thanks


Hi torweb, I've tested and confirmed that it works, but just in case your having trouble, it should be placed with the rest of the CSS, in the style tag, in the head of the HTML, if you post your HTML I'll have a look at it.


Gmail app apologist
torweb, 3 years ago

Thanks...here is the style portion :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#main {
    width: 100%;
}
body {
    background-color: #81BC3D;
}
.table1 {background-color:#FFFFFF;}
.left_right_main {width: 10px;}
   
li { margin-left: -23px; }
div[id*=":"] ul {padding-left: 0px !important;}
.left_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-right: 18px;}
.right_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-left: 12px; padding-right: 18px;}
h2 {font-size:16px; font-family:Arial, Helvetica, sans-serif; color: #1C3F95;}
.permission {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; padding-right: 24px; background-color: #ffffff;}
.permission2 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; background-color: #ffffff; }
a:link {
    color: #04715B; text-decoration:none;
}
a:visited {
    color: #04715B;
}
a:hover {
    color: #04715B;
}
a:active {
    color: #04715B;
}
.fb {width: 55px;}
.twit {width: 55px;}
.centerline {width: 3px !important; background-color:#000099;}
img { outline: none; text-decoration: none; display: block; float:left; padding-right: 10px;}
</style>
</head>

Redferret, 3 years ago

Hi torweb, that works fine for me, can you confirm you're using desktop gmail? this wont work on mobile.

It could also be something in your HTML body causing the issue


Gmail app apologist

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098