Tuesday, July 7, 2009

GetSatisfaction Tweaks

The GetSatisfaction discussion boards are a great service. They save me so much time compared to the previous phpBB forum that I was using. However it's their in-page feedback widget that is bothering me. To make it eye catching they've made the feedback tab sticky. When the page is scrolled up or down, the tab remains in place. This is done using the CSS property
background-position: fixed

GetSatisfaction tab widget

Neat as it may be, Firefox (up to an including 3.5) has lousy performance when a fixed element is placed over a background image. Scrolling becomes choppy instead of smooth.

Another problem was its interaction with a jQuery Lightbox plug-in that I've used on the website. It pops up a zoomed in screenshot and dims the rest of the website. Great stuff, but the GetSatisfaction tab was not dimming.

That's why I applied the following tweaks in my own stylesheet:

a#fdbk_tab {
/* Smoother scrolling in Firefox */
position: absolute !important;

/* Stay below Lightbox */
z-index: 50 !important;
}


The first CSS rule ensures that the tab scrolls with the page while staying in the place when the page is resized.

The second rule puts it below the jQuery Lightbox dimmer but above other elements in the page. If you have other elements on the page with an explicit z-index you may need to tweak this value.

Using the !important modifier ensures that these properties override any other inherited or explicitly defined CSS rules.

1 comment:

Jason Rundell said...

Thanks! This is really going to help me out :)