The Incredible Dancing Google Ads | March 26, 2004

If your viewing this page using FireFox (also Moz 1.6) on Windows, you may notice a rather strange problem. If you roll over a link in the main content area on my blog (but not the nav or the side bar), the Google ads appear to jump up the page for a split second, and then jump down again. This also happens when you roll off a link.

I have absolutely no idea what's going on, but would love to get to the bottom of the problem. If you've got any idea, please let me know. In the meantime, I'd just like thank all the people who've emailed me to let me know. There have been quite a few so sorry that I've not been able to thank you in person, but I really appreciate the heads up.

Posted at March 26, 2004 7:18 PM

Comments

andrew said on March 26, 2004 8:14 PM

It seems to have something to do with the interaction of a:hover in your stylesheet, the border property, & Google Ads content. If you remove ‘border: 0px none;’ from your a:hover definition, the problem disappears. Just an observation…

Milan Negovan said on March 26, 2004 8:24 PM

Looks like this solves it:

a:hover{
color: #003366;
border-bottom: 1px solid #6699CC;
}

Joseph Lindsay said on March 26, 2004 8:35 PM

Hi Andy,

Try adding #links {overflow: hidden}

Andrew said on March 26, 2004 10:16 PM

AFter you e-mailed me back about it I played around a little and found that it was rooted with you border tags in a-hove. if you remove it works but if not, you’re not so lucky.

Milan Negovan said on March 26, 2004 10:34 PM

The underline on hover appears one pixel above the border (if my vision isn’t deceiving me). For some reason it throws the iframe with Google ads off the scale. A very strange effect indeed. Btw, I wonder if those folks really had to use an iframe.

Aleksandar Vacić said on March 26, 2004 11:03 PM

I had the same problem, when I had a style that changed font-weight from normal to bold, for a:hover.

It seems that gecko has some strange problems when text is reflowed.

Joseph Lindsay said on March 26, 2004 11:18 PM

Yes, it’s definetely happens on reflow. If you resize the window it flickers the same as on hover. Also if you resize the text in the browser it happens too. Changing the overflow stops it.

Ronan said on March 26, 2004 11:25 PM

Andy, count yourself lucky: on zlog, adsense has disappeared completely in Mozilla and Firefox (ever since I started sending ‘application/xhtml+xml’, so I’d imagine that was the problem).

Adhering to standards breaks the ads? This calls for riots! ;)

Tom said on March 26, 2004 11:37 PM

I tried with EditCSS, and this seems to work:

border-style: none;

Nick Cowie said on March 27, 2004 2:01 AM

It has something to do with how Gecko initially places floating content after redrawing a page for a:hover.

Any physical size difference between a and a:hover, be it border, font-size, font-weight will cause the dancing google ads.

If you float left the #links div, the inital appearance of the ads in the top left before falling into place.

Solutions:
1 - Do not change the size of a elements between passive and hover states or
2 - Do not float elements. Replacing float: right in #links with position: absolute; right: 38px; solves the problem.

Why it only affects the #links div and not the floated #content div I don’t know.

Many thanks to Pascal Guimier for his wonderful Edit CSS extension for Firefox, which allowed me to change the CSS of this page on the fly.

Stuart Brighton said on March 29, 2004 12:19 AM

Use adblocker (http://texturizer.net/firefox/adblock.html) for firefox and no google ads, problem solved..

Andy Budd said on March 29, 2004 8:51 AM

Thanks folks.

Nick Cowie said on March 29, 2004 9:44 AM

Andy

I see you resolved the issue, the simplest way, by adding a border to a:hover.

A lot easier than having to add position: relative and position: absolute to a lot of divs.