Default Drigg theme throws weird code with AdSense Injector
Posted September 30th, 2008 by Satori
It took me a bit to nail this down, but when I use AdSense Injector with Drigg, it prints out the injected code for the ad immediately prior to executing it. This could have been anything - an Ajax problem, a Digg module quirk, Filtered HTML filtering improperly - but I spotted this similar problem in a seemingly unrelated Drupal issue with the Garland theme:
http://drupal.org/node/102252#comment-269363
And so I tried using the 4plus theme, and the problem disappeared. It's theme-based, and it's the default Drigg theme. You seem to have done a lot of work recently getting various media types embeddable in Drigg - posting a code snippet to help the default theme get along with AdSense Injector would be tremendous if you could.
The problem occurs in both full-page views and Teasers. And only in Drigg modules - in a Story, for example, it displays correctly even under the default theme.
http://drupal.org/files/issues/DriggInjection_0.gif
http://drupal.org/files/issues/StoryInjection_0.gif
This appears to be a CSS issue with the default theme similar to the above-mentioned Garland glitch - or at least producing similar results - but neither Merc nor myself know CSS. The thought was that by putting it here on the forum, someone with a background in CSS could take a look at it. Oddly, the Drigg theme doesn't seem to be using the print command that was causing the Garland problem - I've compared the source between the two Drigg themes - but perhaps I'm just not looking in the right place. Could someone take a look at it please?
This thread corresponds to the bug report, here:
http://drupal.org/node/314392
Bump
Hi,
Anybody: please give us a hand...
Merc.
Problem solved - needs an official solution.
I've located the problem and found a stopgap solution for myself. To make this simpler for the cavalry when they get here, I'm going to attempt to explain the bug as it was found in the Garland case - for which a solution was found - because it explains what's happened here.
The Garland CSS was essentially unique in that it had script in its header. When AdSense attempted to insert a banner there via javascript, the theme displayed the javascript itself before executing it.
The team looking into the bug realized that this was due to code in the Garland theme's style.css file which read:
284 #header-region * {
285 display: inline;
286 line-height: 1.5em;
287 margin-top: 0;
288 margin-bottom: 0;
289 }
Not only was the "display: inline" unnecessary (because it's the default setting), and never mind that Garland's theme was the only theme to use that setting, the "*" in line 284 applied the inline setting to absolutely everything there... including unexpected AdSense script.
What "display: inline;" does, evidently, is cause whatever it is (in this case everything, AdSense script and all) to be displayed in a way that tries to fit it all on one line as best it can - to make best use of space. Because the Garland theme - and Drigg's default theme - approach things this way, AdSense Injector comes along independently trying to inject script for an AdSense ad into the Drigg module. The "display: inline" code throws the fact that AdSense code is normally invisible right out the window, does a stiff little formal salute and proceeds to format the code to fit it on one line as best it can - formatting evidently being prioritized ahead of code execution - and within a Drigg module the text wraps within the block anyway once it's out of space. Then, it proceeds to execute itself - displaying the AdSense ad after all... after merrily babbling out the script itself onto the screen.
The crew fixing the Garland theme bug solved the problem by commenting out the "display:inline;" and a few more formatting lines immediately following it as well, before deciding that this was dangerously kludgey and could produce unanticipated side-effects down the road. The problem was then re-solved by simply putting, "display:none;" immediately after the whole thing.
The solver then suggested that the "*" applying itself to anything and everything that appeared in that area was dangerously and needlessly clumsy, and should probably be replaced with only those things specifically that ought to be formated as inline.
I've compared the CSS between the 4plus theme and Drigg's default theme. Drigg's default uses lots of "display: inline;"s throughout, and has problems with AdSense Injector. 4plus does neither.
I've resolved the problem by removing these three lines from the nodes.css file of Drigg's default theme:
.node.ntype-drigg .story * { display: none; }
.node.ntype-drigg .story small a { color: #666; }
.node.ntype-drigg .story p { margin: 0; }
(They're just above the "Embedded content" section), saving the file and replacing the themes/drigg_theme/css/nodes.css with that copy. I had to make sure my site wasn't using a cache, and I closed all browser tabs with my site in them, clearing my browser's cache before going back into my site.
It worked, and per Merc's request this thread is now moved to the bug reports area, at:
http://drupal.org/node/314392
Be well,
- Satori