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.
Comment
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…
Comment
Looks like this solves it:
a:hover{
color: #003366;
border-bottom: 1px solid #6699CC;
}
Comment
Hi Andy,
Try adding #links {overflow: hidden}
Comment
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.
Comment
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.
Comment
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.
Comment
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.
Comment
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! ;)
Comment
I tried with EditCSS, and this seems to work:
border-style: none;
Comment
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.
Comment
Use adblocker (http://texturizer.net/firefox/adblock.html) for firefox and no google ads, problem solved..
Comment
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.
Comments on: The Incredible Dancing Google Ads
Jump to the comment form