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

Thanks a whole lot!

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.

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 */
}

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.

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.

I am exposing my extremely limited css skills here LOL

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.

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 :)