Question

Some of our users have been having css inserted into their posts without their knowledge. This css appears to be advert related and is not generated by a wordprocessor and consists of only css and no html. Below is an example:

.adslot-overlay
{
  position:absolute;
  font-family:arial, sans-serif;
  background-color:rgba(0,0,0,0.65);
  border:2px solid rgba(0,0,0,0.65);
  color:#FFF!important;
  z-index:2147483647;
  text-decoration:none;
  box-sizing:border-box;
  text-align:left;
  margin:0;
}

.adslot-overlay-iframed
{
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.slotname
{
  position:absolute;
  top:0;
  left:0;
  right:0;
  font-size:13px;
  font-weight:700;
  vertical-align:middle;
  background-color:rgba(0,0,0,0.45);
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  padding:3px 0 3px 6px;
}

.slotname span
{
  text-align:left;
  text-decoration:none;
  text-transform:capitalize;
}

.revenue
{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  font-size:11px;
  vertial-align:middle;
  text-align:left;
  background-color:rgba(0,0,0,0.45);
  font-weight:700;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  padding:3px 0 3px 6px;
}

.revenue .name
{
  color:#ccc;
}

.revenue .horizontal .metric
{
  display:inline-block;
  padding-right:1.5em;
}

.revenue .horizontal .name
{
  padding-right:.5em;
}

.revenue .vertical .metric
{
  display:block;
  line-height:1.5em;
  margin-bottom:.5em;
}

.revenue .vertical .name,.revenue .vertical .value
{
  display:block;
}

.revenue .square .metric,.revenue .button .metric
{
  display:table-row;
}

.revenue .square .metric
{
  line-height:1.5em;
}

.revenue .square .name,.revenue .square .value,.revenue .button .value
{
  display:table-cell;
}

.revenue .square .name
{
  padding-right:1.5em;
}

.revenue .button .name
{
  display:block;
  margin-right:.5em;
  width:1em;
  overflow:hidden;
  text-overflow:clip;
}

.revenue .button .name:first-letter
{
  margin-right:1.5em;
}

a.adslot-overlay:hover
{
  border:2px solid rgba(58,106,173,0.9);
}

a.adslot-overlay:hover .slotname
{
  border-bottom:1px solid rgba(81,132,210,0.9);
  background-color:rgba(58,106,173,0.9);
}

a.adslot-overlay:hover .revenue
{
  border-top:1px solid rgba(81,132,210,0.9);
  background-color:rgba(58,106,173,0.9);
}

div.adslot-overlay:hover
{
  cursor:not-allowed;
  border:2px solid rgba(64,64,64,0.9);
}

div.adslot-overlay:hover .slotname
{
  border-bottom:1px solid rgba(128,128,128,0.9);
  background-color:rgba(64,64,64,0.9);
}

div.adslot-overlay:hover .revenue
{
  border-top:1px solid rgba(128,128,128,0.9);
  background-color:rgba(64,64,64,0.9);
}

I’ve done a search of the internet and cannot see any explanation for this. All I get are multiple other sites with similar css such as the following:

http://www.greenbiz.com/video/2012/02/24/john-donahoe-conversation-joel-makower

http://bloggers.com/posts/tamilactressbook-47592 (every post)

It would seem that this css is injected via javascript, since so many ad scripts are js and that the posting mechanisms use a wysiwyg editor such as tinymce. It may be browser related and it may be dependent on add-ons. At this stage it is a mystery and am wondering if anyone else has come across it.

Answer 1

Lyndsy is correct about Google Publisher Toolbar being the culprit. GPT creates and overlay with ad stats etc, and somehow the CSS for that gets inserted into text editors. Turn it off when creating / editing posts.