Google + button hover and Zen 5.x

January 3, 2013

A problem with the recommendations hover

After adding the Google + button to our blog and news pages, I notice a display issue with the recommendations hover drop-down. It appeared to be slightly blown apart at the top, but how do I figure out what is causing this?

The problem found

Well, after spending some time reviewing the generated code, using firebug, I begun to think it wasn't Google's CSS causing the issue. So I searched through the Drupal core and Zen theme CSS and by process of elimination found the culprit. It was the normailize.css(scss) file in our Zen subtheme. It contained the responsive image declaration that was overridding the inline <img> height value.

img { /* Responsive images */ max-width: 100%; height: auto; }

One possible, but maybe not ideal, Fix

So how do you override, or disable, height:auto? That's a good question, because "auto" is the default setting for height. So the best solution I could come up with to override the CSS was by adding a fixed css height value for each image used. But what happens when Google changes the output… guess I'll have to fix again?

.pls-topLeft img, .pls-topTail img.pls-spacerbottom, .pls-topRight img, .pls-contentLeft img.pls-spacerright, .pls-dropRight img.pls-spacerleft, .pls-bottomLeft img, .pls-dropBottom { height: 1px; }

.pls-vertShimLeft img, .pls-vertShim img, .pls-vertShimRight img.pls-dropTR { height: 4px; }

.pls-vert img.pls-dropBL, .pls-vert img.pls-dropBR { height: 5px; }

.pls-topTail img.pls-tailbottom { height: 9px }

.pls-dropBottom img.pls-tailtop { height: 13px; }

.pls-contentLeft img { height: 15px; }

.pls-contentWrap img.pls-spinner, .pls-contentWrap img.pls-tailright { height: 16px; }

.pls-dropRight img.pls-tailleft { height: 19px; }

All fixed, for now...