Question

So, I want to set next to each other a Facebook like button(html5) and a Twitter tweet button.

Everything is set here: http://jsfiddle.net/tGujU/

I have one big problem when I click on the facebook like button.
Because it will show the comment pop-up (which I want to see poping-up), the facebook iframe get then resized to 450px. Once the pop-up disappears, the iframe is not resized to small dimension !
I set the design so no big space is created between the two buttons.

But the problem is then, once you click on the facebook like button, you cannot click on the tweet button anymore because the wide facebook iframe is covering it.

What I tried:

• Use overflow:hidden on the div#facebook_button but then, I don’t get to see the comment pop-up. => NG.
• Change the iframe z-index to got the twitter iframe on the top => Did not work.
• Add a listener on the FB iframe to try setting overflow:hidden at the right time and remove it when needed but could not find a way to listen to its changes.

What I want to do:

• Keep providers in this order and not put Facebook on the right.
• See the FB comment pop-up once like button is clicked.
• Being able to click the tweet button after I click th FB button.
• Having it supported in IE8+, FF4+ and Chrome.

Any help is welcome.

Answer 1

You could raise the z-index of the Twitter button (iframe), so that it is higher than any of the Facebook stuff.

#twitter_button iframe{
  z-index:9999;
  position:absolute
}​

Not the prettiest solution, but it works (see the Fiddle).