I don’t know how long I’ve been bothered by the Firefox problem with Google Adsense ad blocks. I’m sure you know what I’m referring to. While a web page is loading all you can see are Google ads flickering across the page. Or you’re on a site and when you move the mouse over a link, the Google ads flicker. It’s rather annoying. The funny thing is IE, our favorite browser, doesn’t have this problem. Or is it that FF behaves correctly (which is not desired) and IE’s behavior (preferred) is wrong?

Well, today I finally found a fix. Below you’ll find the code I’m using. It has worked on 3 different sites that are all using different layouts and CSS. I can’t guarantee it’ll work for everyone, but it seems to have fixed my problems.

<div><div id="google-banner"><div id="google-banner-inner"><br />

************************************

** Place your Google Adsense code **

** here for the 468x60 ad block   **

************************************

</div></div></div>

<div id="google-banner-clear"><br /></div>

Add the following to your CSS.

#google-banner {

height: 63px;

width: 468px;

margin: 3px;

padding: 0;

position: absolute;

}

#google-banner-inner{

width: 468px;

margin: auto;

}

#google-banner-clear {

margin-top: 63px;

}

In case you are interested in what is actually happening, I’ll try to explain to the best of my understanding.

Firefox seems to have a problem when dynamic content (such as the iframe for Google Adsense) is drawn to the page. For some reason FF doesn’t get the dimensions of this content until everything has loaded. So it keeps redrawing the content until the entire page has loaded.

To get around this, you place the Google ad in a static container (div id=”google-banner-inner”). This static container is then placed inside an absolutely placed container (div id=”google-banner”). The absolute container is not part of the normal flow of the page, so therefore it will not be redrawn as the rest of the page loads. The space for this absolute container is held open by placing an item (div id=”google-banner-clear”) below with a margin set to leave the space available.

Confusing? Yeah.

I’m definitely not smart enough to figure that out on my own. The SitePoint Forums had the solution. All I did was put together some of the thoughts to make it a little more readable and hopefully more user friendly.

By following the code in my example, you should be able to apply the same technique to any size Google Adsense block. Simply create a unique set of CSS IDs for each Adsense block used on your site and change the associated widths and heights in the CSS.

If the above solution doesn’t work, you might want to try another solution I came across at Dusty Road Designs. I tried it, but didn’t have any luck.