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?
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);
}