4 August 2006

Debugging Google Adsense CSS

Google as it turns out to be can mistakes too. These mistakes are common in the programming world and are commonly called "bugs". I ended up finding one of these so called "bugs" in Google Adsense style sheets. It is something that one won't expect from a CSS expert, but there are some days when these kind of things don't come under the radar. In order to see the buggy behaviour(if they haven't patched the system yet - not till 5Aug 12:00pm EDT) you need a google adsense account. If you don't have one, you will have to make do with the screen captures provided below.

Google Adsense control panel has a tabbed interface implemented using CSS which looks good when viewed in Firefox at default text zoom (Ctrl+Zero). But just when you increase the text zoom level even by a single step, text and other elements under the tabs are shifted to the right giving them a left margin equal to width of the tabs above it.

The problem comes from the fact that the anchor links in the inline list of the tabs are floated left and hence when we zoom in with Ctrl++, the anchor element's size increases so that it overlaps the div element under it which is in normal flow. Now as the div element under the tabs is not cleared left, its content is shifted to the right equal to the width of the tabs above it.(cf. Floats)

A quick hack to solve the problematic behaviour would be a clear: left rule added to the div element below the tabs. In the other more elegant(and longer) method, the use of the float behaviour can be dropped as the anchors are already in their list element boxes. Positioning and other properties can be applied to the list elements instread to achive a better implementation of the tabs using CSS.

Screenshots for the problem and results after adding clear property:

Google, where is my reward for the above explanation and solution?

No comments: