Question

I am using XFBML version of the Like button and it works great except for one thing, the comment box is being clipped by other elements on the page. I have researched this topic for a few days and came across several different solutions ranging from adjusting z-index to ensuring that any overflow: hidden are set to overflow: visible, none of which have resolved my issue.

There was also a post where you could hide the comment box altogether, but I feel like that would dilute the impact of a user liking something on my site, if they feel compelled to add a comment, that’s potentially more click-throughs to my site.

My question is, is there any official FB documentation regarding this issue and how we, as developers, can work around it?

Answer 1

Finally figured it out. I am using CSS PIE to get rounded borders and drop shadows to work in IE browsers and for some reason I added z-index: 0 to the pie class. Upon removing the z-index from this class the comment popup worked as expected.

From:

.pie {
    position: relative;
    z-index: 0;
    behavior: url(/css/vendor/pie/PIE.htc);
}

To:

.pie {
    position: relative;
    behavior: url(/css/vendor/pie/PIE.htc);
}