Google adsense scrolling fix

Nick Wilsdon · May 4th, 2005

You know how it starts. You're sitting having a coffee talking about how much this little display problem just bugs you. You sit down to fix it and soon it becomes a complete mission. Moving something by 2 or 3 pixels each time and resaving. One of those cross-browser bugs that drives you crazy…

Well that happened last week to me with the Adsense displays. They scroll or shift upwards when viewed on the Firefox browser. Not a lot but but enough to stop you smoothly scrolling your mouse wheel down the page. Strangely enough there wasn’t a fix out there on the net. Even stranger I only found one or two people complaining about this.

Even on Webmaster World I found they had given up pretty quickly:

Must just be an incompatibility between Google’s code and Firefox then. I feel better now.

Blimey Metaphorically that’s not the spirit - come on, start hacking it! ; -)

Considering that Firefox is now reported to control anywhere between 8-10% share of the browser market with 50 million downloads, it does seem worth having a go at correcting this.

The fix

Well here is the cunning part. If you have a white background then the fix is extremely simple. Find the following line in your Adsense code:

google_ad_height='60'

and change it to:

google_ad_height='65'

Yes that’s it. By forcing those extra 5px into the iframe that the Google Javascript calls you can avoid that scroll altogether.

However if you are using a coloured background on your page then you will now notice a thin white line has appeared under the adverts. Now the fun really starts.

I’m the first to admit that the following code is not the most elegant of solutions. Analogies involving sledge hammers and nuts come to mind. I welcome you to post on how to improve this, after all this is just a few pixels of white space we’re dealing with!

For those of you who want to have a go at this, the problem seems to lie halfway between Firefox’s handling of overflow and the question of why there is overflow in the first place. I will happily post and use your improved script or hack - giving you full public credit here. *

The white-line fix

The HTML and Javascript

This would be inserted into your page or blog template, in the same place you have already placed your Adsense code. Remove that block of code and replace it with the following, replacing the values where noted.

We are going to create a container div around the Javascript, called ‘adsense-container’ and an additional div under Adsense code, called ‘adsense-hack’. Importantly you will remove the google_ad_height line from its normal position. You will see that we are dynamically changing that field with a browser detection script.

<div class='adsense-container'>
<script type='text/javascript'> google_ad_width = 468; <!—or 234px in the case of the half-banner--> google_ad_format = "468x60_as"; <!—or 234x60_as in the case of the half-banner--> google_ad_type = "text"; google_ad_channel =""; google_color_border = "f5f5f5"; <!—replace with your settings--> google_color_bg = "f5f5f5"; <!—replace with your settings--> google_color_link = "003399"; <!—replace with your settings--> google_color_url = "008000"; <!— replace with your settings--> google_color_text = "000000"; <!—replace with your settings--> //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <div class="adsense-hack"></div> </div>

The CSS

Copy these lines into the bottom of your CSS sheet. Important here is to note that we have hidden our hack (the covering background DIV) from IE.

.adsense-container { padding: 0px 0px 0px 0px; width: 468px; /*or 234px in the case of the half-banner */ margin: 20px auto 20px auto; /*optional settings for space and centering*/ }
.adsense-hack { height: 5px; width: 468px; /*or 234px in the case of the half-banner */ position: relative; margin: -6px 0px 0px 0px; background-color: #f5f5f5; /*change to your background color */ _background-color: transparent; /*hack to make transparent in IE */ }

Interestingly I have noticed a marked rise in CTR (click through rate) when using the banner or half-banner in blog posts. I’m not the only one either by the looks of it. I’m not sure if this scrolling issue was causing some people not to implement these but hopefully this post makes some first steps towards providing a current workaround.

It was also good to explore the level the publisher can manipulate the Adsense coding. If we can dynamically adjust the height of the advert we can also do this for the colours, links and even publisher ID. For example, this might be useful for CSS designs where a publisher wants the adverts to change appearance to fit the theme that the visitor chooses.

Update 10/08/05:

Cody over at Pixeljunkies has carried out some great work on this problem. His solution was without a doubt more elegant than mine. Kudos to you Cody for tackling this. However he reports that further testing has shown that the white pixels still appear in Opera and basically all Mac browsers. So it looks like we’re still looking for the solution to this one!

Update 20/09/05:

Looks like this is fixed now with the arrival of FireFox 1.5. This all relates to the bug detailed here. Which is cool/

* One point, we couldn’t use absolute positioning for the adsense container as this would cause problems with many people’s pages and layout. So absolutely positioned overlapping iframes and DIVS are out. Universal as possible please.

26 responses so far ↓

1 Nick // May 5, 2005 at 4:27 pm

Unfortunately I’ve already found one small problem with this. When the user changes text sizes for the page the scroll comes back. There’s no way of setting a % value in the Adsense Javascript. I still think the elegant solution will come from from futher examination of the way Firefox handles DIV overflow.

It’s worth reading the work SuzyUK has documented over at webmaster world on using overflow:auto to fix adsense bugs
2 Mark // Jun 3, 2005 at 1:33 am

Thankyou soooo much for this article, if you can be bothered to remind me at [email removed to avoid spam] ill write a post for the Duck Computing homepage and stick your link in it, because this page deserves more than a PR of 0
3 Nick // Jun 3, 2005 at 6:56 am

Thanks Mark, I’m glad someone found it useful! I was hoping that it would add to the knowledge we have on this bug anyway. It doesn’t seem to be the fault of Google as people are reporting but a reaction to the way Firefox deals with div overflow.
4 Brian // Jun 10, 2005 at 9:23 pm

I’ve been having this problem too…one thing I’m worried about though is that Google says that you cannot modify their code. Does this count as modifying code? I also was going to implement color changes based on the user-chosen theme, but that might be modifying Google’s code… Have you asked Google about this?
5 Nick // Jun 11, 2005 at 6:57 am

Hi Brian,

No I haven’t asked Google about this but I don’t see why they would object. There is no malicious intent here to manipulate their system. This hack only affects the display of the adverts which is clear to anyone looking at your site code. Nothing here is going to increase your clicks, aside from making your user experience more pleasant in Firefox.

This actually reminds me of a something Barry Schwartz, an SEO expert wrote recently. People have become paranoid about Google TOS violations when they done absolutely nothing wrong. The key term here Brian is ‘intent’. If you are making modification with the intent of gaming their system then Google will come down on you.

Of course implementing this is entirely your choice. As a publisher I feel that this modification enriches the user experience, as there is a bug present with the current Adwords /Firefox combination. If this bug was fixed then I would not be using this code. It is a slightly different case when modifying the code for colour display but again I would suggest that is enhancing the user experience.

If you are still worried then I welcome you to contact a Google rep and link them to this page, I would be happy to include their comment here.
6 Stin // Jun 13, 2005 at 1:57 am

Thanks for the quick and easy fix (increasing the ad height). My site uses a white background, so I guess I got lucky. When implementing it i found that I had to increase the height by 5 for a ‘banner’ as you said, but required 6 for the leader. There has to be some secret way to stop this scrolling out there. I used to have the wide skyscraper on my site that always scrolled until I put it in its own div with padding on all sides and border. This doesnt seem to have any affect on the horizontal ad types though.
7 Nick // Jun 14, 2005 at 1:50 pm

Glad I helped Stin. Yes I think an easier fix is needed, especially in the case of coloured backgrounds! With this many FF users it seems unusual to me that more people are not pushing for this. Although I believe many people are already looking at the way in which FF handles div overflow. Irrespective of whether Google have caused this extra space into their code, IMHO the containing div should not show overflow if specified. I have a feeling this will all just work itself out in time but hopefully this ‘dirty’ fix will help people wanting to mend this now.
8 badrad // Aug 8, 2005 at 11:00 am

Thanks a lot for this simple fix!
9 badrad // Aug 9, 2005 at 1:30 am

I have come up with what I belive is a better way of doing this:

http://www.pixeljunkies.com/forum/viewtopic.php?pid=512

It uses no javascript, is pure CSS, and does not require modifying Google’s code.
10 Nick // Aug 9, 2005 at 7:37 am

Good call Cody :D Yes that does seem like a definite improvement on my fix. I like the way you have avoided the JavaScript and Adword code alterations: much cleaner! I’ll take it for a test ride after work tonight and then add to my post here.

All the best

Nick
11 badrad // Aug 9, 2005 at 10:18 am

Cool :)

I’m very happy with it. I’m just trying to see if I can come up with some CSS sorcery to make it perfect in Opera as well.
12 Wally // Aug 13, 2005 at 11:56 pm

Hello,
can someone translate it into german PLEASE!
What can I do? I dont understand ist, but I
think/hope it ist urgend/nessesarry.
hm?
13 Robyn // Oct 14, 2005 at 6:11 am

I have noticed this on my http://www.duzins.com site and this hack didn’t work for me. I know you know how to fix this. I would very appreciative if you had some ideas on what is going on here.

I could care less if the ads further down the page jump because they are low enough that you don’t see them while they load, but that darn top-most ad is killing me.

Thanks!
14 Nick // Oct 14, 2005 at 7:51 am

Hey Robyn,

You mean you tried putting the extra 5px into your adsense code and it didn’t work?

google_ad_height=’60′

and change it to:

google_ad_height=’65′

As I said in the update, Firefox 1.5 has resolved this issue but we’re stuck with it for a little while before everyone updates.
15 Robyn // Oct 14, 2005 at 8:02 am

yes, I tried this, no luck. it still jumped.

I was using the beta for a while, and I didn’t notice the jumping then. I had to stop because I am addicted to my extensions and only about 10 of the ones I use were updated.

if you have any other ideas that’d be great. you have my email too. thanks anyway :) great blog!
16 Nick // Oct 14, 2005 at 8:10 am

The extra 5px trick does work *but* it is dependant on the size of text the user has on their PC. That was the problem I found. So adding in an extra 5px works for the users with ‘normal’ text text but if they have that set slightly smaller or larger, it fails again.

Did you have a go with Cody’s fix?

http://www.pixeljunkies.com/forum/viewtopic.php?pid=512

He had some problems with making the white line disappear but as you have a white background on your blog already this wouldn’t affect you.

Thanks for the compliment - like your 43 things too ;)
17 Robyn // Oct 14, 2005 at 8:18 am

that link above to Cody’s page is a little weird… Takes me to:

GAME OVER
To continue, insert freedom of speech.

Odd ;) Anyway, I have another one, gamingandtech.com that has more normal sized text, but I can’t try it there because the bkgrnd is black. I guess I’ll just remove the adsense from above the fold, so to speak.

See you online :)
18 Nick // Oct 14, 2005 at 8:30 am

Blimey you’re right, looked like he’s forgotten to put some coins in the meter ;)

Anyway, I have another one, gamingandtech.com that has more normal sized text,

Ah I don’t mean the size of the text on the page, it’s the text size that you have set in the browser that affects it. The View > text size option. The 5px we put in is a static number so of course if you increase the text size you would need 6+ for the height. I couldn’t use a dynamic number for height (em/%) so it can’t adapt to these changes.

I settled with the 5px as that seemed to fix the problem for the ‘normal’ text size. So try putting it in to your code and changing your text size in the browser.
19 Robyn // Oct 14, 2005 at 8:37 am

Is there a way I can just not do ‘float’ or does that have nothing to do with it?

I am exposing my extremely limited css skills here LOL
20 Cody // Oct 14, 2005 at 8:41 am

Yes, my website was taken down. It was primarily a webcomic I made with a friend, and he was unable to continue. Here is my contribution to this fix, quickly copy and pasted out of my forum archive:
—————————————————————–
About

There is a bug in Google Adsense, where under Gecko browsers (Firefox, Mozilla, Netscape, etc) you can scroll an ad a few pixels past its regular display. I’m not sure if this occurs on all ads, but it definitely occurs on the 728×90, 468×60, and 468×15 units that I use on this site.

Besides being ugly, this has the side effect of trapping a users mouse briefly if they are scrolling the page and their mouse enters an ad.

I have read on the web many people who have submitted this as a bug to Google. I have not yet, but they won’t do anything about it. How long have we been complaining about xhtml+xml support?

In searching the web for a fix, I came across this article:
http://www.e3internet.com/greenhouse/ni … lling-fix/

It contains a fix, a fix I didn’t like for the following reasons:
1. Required modification to Google’s code (insignificant, yet against the TOS)
2. Used browser sniffing.
3. Required Javascript.

It was, however, enough to get my juices flowing. I’ve spent the last 4 hours tinkering around, and have come up with a hack that is pure CSS and does not alter a single piece of the Google code. I still thank Nick Wilsdon from the above link for the inspiration, and the technique I use is extremely similar.

It fixes the bug in gecko browsers (Mozilla, Firefox, and Netscape), and remains working in IE. The fix does not work in Opera where a bug prevents it from working, instead several (4-6) pixels of white will appear under the ad in Opera. For me, it is a worthwile compromise, because gecko based browsers have around 60% usage on my site while Opera has around 1%. I have had zero success, and believe its impossible, to work around the z-index bug in Opera that causes this fix to not work.

Furthermore, I am sharing this fix and you can feel free to give feedback, perhaps we can improve it further!

One other thing. Across the web there are people blaming this on Firefox and other people blaming it on Google. My point of view: they are both at fault. Firefox could probably be handling overflow:hidden better in some way. Google should have constructed the iframe (if an iframe is even really necessary) to actually be the size it claims.

The Fix

There are two steps to the fix. The first is to get the scrolling to stop by showing the full iframe. If your page has a white background, you can stop here, as the few extra pixels shown at the bottom of the ad are white. If your background is not white, we create a strip of color to cover up the white with the color (or bg image) of your choice.

I started by looking at the code within the iframes. It didn’t lead me anywhere, but it does reveal the source of some of our problems. Here is an example ad from my site:
http://www.pixeljunkies.com/public/goog … ample.html
I have applied source formatting so the source is easier to view, and edited the links to go nowhere.

Looking at it makes me cringe. I know the guys at Google can write good code, but why don’t they? So this mess shows a couple of things. First, it is 5am, but I’m not sure the pixels add up to the 60px tall this unit is supposed to be. Second, the white background that gives us all this trouble. If Google simply made the background color on the body the same as the “google_color_border” color, we could simply only use the first step of the fix.

I have only made fixes for the ad types I use, but by looking at them you can probably adapt it to other types.

468×60

and apply this CSS:

.adsense468×60hack {
height: 6px; /* dimension of the area you need to cover */
width: 468px; /* dimension of the area you need to cover */
background-color: #124F7D; /* color/image you are using to cover the white */
position:relative;
top:-10px; /* move the cover into place, change if you change the height */
}

.adsense468×60 {
width: 468px; /* width of 468×60 ad */
height:65px; /* height of 468×60 ad + extra white space */
margin: 0 auto -6px auto; /* negative bottom margin is height of extra white space to prevent extra space around ad */
}

.adsense468×60 iframe {
height: 65px; /* height of 468×60 ad + extra white space */
width: 468px; /* width of 468×60 ad */
}

/* turn off the covering div for IE */
* html .adsense468×60hack {
height: 0px;
width: 0px;
background-color: transparent;
top:0px;
}

/* bring ad back to regular size for IE, remove extra space that is for some reason introduced */
* html .adsense468×60 {
height:60px;
margin: 0 auto -20px auto;
}

/* bring ad back to regular size for IE */
* html .adsense468×60 iframe {
height: 60px;
}

728×90

.adsense728×90hack {
height: 7px; /* dimension of the area you need to cover */
width: 728px; /* dimension of the area you need to cover */
background-color: #124F7D; /* color/image you are using to cover the white */
position:relative;
top:-11px; /* move the cover into place, change if you change the height */
}

.adsense728×90 {
width: 728px; /* width of 728×90 ad */
height:96px; /* height of 728×90 ad + extra white space */
margin: 0 auto -7px auto; /* negative bottom margin is height of extra white space to prevent extra space around ad */
}

.adsense728×90 iframe {
height: 96px; /* height of 728×90 ad + extra white space */
width: 728px; /* width of 728×90 ad */
}

/* turn off the covering div for IE */
* html .adsense728×90hack {
height: 0px;
width: 0px;
background-color: transparent;
top:0px;
}

/* bring ad back to regular size for IE, remove extra space that is for some reason introduced */
* html .adsense728×90 {
height:90px;
margin: 0 auto -20px auto;
}

/* bring ad back to regular size for IE */
* html .adsense728×90 iframe {
height: 90px;
}

468×15

This size only needs to be expanded, as the color contained within the extra pixels is the color that is set by your adsense border color.

and apply this CSS:

.adsense468×15 {
width: 468px; /* width of 468×15 ad */
height:19px; /* height of 468×15 ad + extra white space */
margin: 0 auto 0 auto; /* negative bottom margin is height of extra white space to prevent extra space around ad */

}

.adsense468×15 iframe {
height: 19px; /* height of 468×15 ad + extra white space */
width: 468px; /* width of 468×15 ad */
}

What the hack does

I am expanding the ad iframe to be the full size it really is, and creating a div to cover up the white. I use positioning rather then negative margins like Nick did because the negative margins gave me more problems.

While technically IE should understand this CSS, it doesn’t. Probably because it is buying the height the iframe is claiming. If left as is, the cover up div covers more then it should in IE, plus the whole thing takes up more space. The * html rules (which is a rule only IE applies) take away the cover up div for IE, and correct the spacing problems implemented in IE by this fix.

What about XHTML+XML
For those of you using the method of making adsense work when the document is sent as an XHTML+XML mimetype using an object, like this:
http://keystonewebsites.com/articles/adsense.php

You will find that this does not help you. I’ve tried to get it to work when it is included as an object, but I can’t. It’s weird, It seems to me that just telling the object to be 65px high rather then 60 would work, but it doesn’t want to. This proves that the few pixels of scrolling is taking place within the included Google page, not in the object/iframe.

I am not concerned, as I am currently not using this method. I have found that while your pages are still targeted, if you have multiple ads they all show the same content, the object method stops the Adsense multiple ad algorithm from working.

Can anyone else figure out a way to get this to work with the object method?

Browser Support

Testing the newest code:

IE7: Wont test until out of beta. IE7 doesn’t parse * html rules so unless it nails the positioning the first time it might not get it right. I’ll deal with it when IE7 is out of beta.
IE6: Perfect.
IE5.5: Perfect.
IE5: Perfect.
Firefox/Netscape/Mozilla: Perfect.
Opera 8/7: A few pixels of white beneath ad due to a z-index bug that has no known workaround and is confirmed fix in an upcoming version of Opera.

Firefox/Camino on Mac: Perfect.
Safari: Perfect. (beware that Safari doesn’t always show a bg color the same as an image with that color in it, so if you have a bg image and are trying to use a bg color in the cover up div, their might be a difference in the shade of color in Safari. This can be worked around by using a bg image in the cover up div.)

I don’t support 4.X browsers on my site so I haven’t even checked. I also dont support and thus havent checked Mac IE.

Shortcomings

The only shortcomings are inherent in the fix. The cover up div can easily match a background color or even simple background graphic, but if you have a complex background graphic it will be hard to construct a cover up div that looks seemless. Obviously, you cant set the cover up div to transparent because then it wont cover up the white we are trying to cover.

I think this fix is the best we can possibly do until Google actually fixes the bug themselves. In the meantime, everybody email Google’s Adsense team about the bug and give this fix to anyone you know suffering from it.

Feel free to comment below with any problems, suggestions, or whatever! Hope this bit of code is useful to you.
21 Nick // Oct 14, 2005 at 8:43 am

No Robyn, floating wouldn’t help. It’s down to the slightly buggy Google window and the way Firefox handles overflow.

By the way if you want a great course on CSS, then I would recommmend taking a trip over to http://www.htmldog.com and following the links on the top left.

That’s the primer I use with all my new staff and covers the subject extremely well.
22 Cody // Oct 14, 2005 at 8:45 am

Well, either I pasted in the text wrong or the comment was too long at god wrangled. Here are the code snippets again.

468×60 html:

468×60 css:

.adsense468×60hack {
height: 6px; /* dimension of the area you need to cover */
width: 468px; /* dimension of the area you need to cover */
background-color: #124F7D; /* color/image you are using to cover the white */
position:relative;
top:-10px; /* move the cover into place, change if you change the height */
}

.adsense468×60 {
width: 468px; /* width of 468×60 ad */
height:65px; /* height of 468×60 ad + extra white space */
margin: 0 auto -6px auto; /* negative bottom margin is height of extra white space to prevent extra space around ad */
}

.adsense468×60 iframe {
height: 65px; /* height of 468×60 ad + extra white space */
width: 468px; /* width of 468×60 ad */
}

/* turn off the covering div for IE */
* html .adsense468×60hack {
height: 0px;
width: 0px;
background-color: transparent;
top:0px;
}

/* bring ad back to regular size for IE, remove extra space that is for some reason introduced */
* html .adsense468×60 {
height:60px;
margin: 0 auto -20px auto;
}

/* bring ad back to regular size for IE */
* html .adsense468×60 iframe {
height: 60px;
}

728×90 html:

728×90 css:

.adsense728×90hack {
height: 7px; /* dimension of the area you need to cover */
width: 728px; /* dimension of the area you need to cover */
background-color: #124F7D; /* color/image you are using to cover the white */
position:relative;
top:-11px; /* move the cover into place, change if you change the height */
}

.adsense728×90 {
width: 728px; /* width of 728×90 ad */
height:96px; /* height of 728×90 ad + extra white space */
margin: 0 auto -7px auto; /* negative bottom margin is height of extra white space to prevent extra space around ad */
}

.adsense728×90 iframe {
height: 96px; /* height of 728×90 ad + extra white space */
width: 728px; /* width of 728×90 ad */
}

/* turn off the covering div for IE */
* html .adsense728×90hack {
height: 0px;
width: 0px;
background-color: transparent;
top:0px;
}

/* bring ad back to regular size for IE, remove extra space that is for some reason introduced */
* html .adsense728×90 {
height:90px;
margin: 0 auto -20px auto;
}

/* bring ad back to regular size for IE */
* html .adsense728×90 iframe {
height: 90px;
}

468×15 html:

468×15 css:

.adsense468×15 {
width: 468px; /* width of 468×15 ad */
height:19px; /* height of 468×15 ad + extra white space */
margin: 0 auto 0 auto; /* negative bottom margin is height of extra white space to prevent extra space around ad */

}

.adsense468×15 iframe {
height: 19px; /* height of 468×15 ad + extra white space */
width: 468px; /* width of 468×15 ad */
}
23 Cody // Oct 14, 2005 at 8:48 am

Ah, sorry the comments are stripping the HTML, which only makes sense. Told you I was tired :)

For the 468×60 ad, the google code is wrapped in a div with the class “adsense468×60″. Before the closing of this div, but after the Google code, is an empty div with the class “adsense468hack”.

For the 728×90 ad, the google code is wrapped in a div with the class “adsense728×90″. Before the closing of this div, but after the Google code, is an empty div with the class “adsense728×90hack”.

For the 468×15 ad, the google code is wrapped in a div with the class “adsense468×15″. No further DIV is necessary like the other ones.
24 Nick // Oct 14, 2005 at 8:56 am

Thanks for posting that Cody and I’m sorry to hear your site is down, you had some great stuff there. Send me an email and I’ll try to help you out on that. Maybe some e3internet sponsorship? ;)
25 Robyn // Oct 14, 2005 at 9:02 am

Had to finish this post so others searching here would know how it ended. Nick emailed me and had me try the +5 height one more time and though it still jumps for me, it doesn’t for him. I need to change my text size on my computer to fix it now.

Thanks a whole lot!
26 Online and Offline Promotion // Aug 19, 2007 at 10:09 am

Online and Offline Promotion…

I couldn’t understand some parts of this article, but it sounds interesting…