Change the Simple Facebook Connect popup position

Question

Is it possible to add a parameter to Simple Facebook Connect and the sfc_like_button function to cause the popup to fly out to the left?

Right now, it flies out to the right and is underneath the dark outer wrapper of my page. (see below)

This happens in Firefox, IE and Safari. Using overflow:visible in the containing div doesn't help.

I've tried using positioning and z-index in that div and containing elements to position the popup on top of the wrapper with no luck.

Is this a function of the output of the iFrame at Facebook that can't be changed?

This is the function that includes SFC:

<?php sfc_like_button(array('width' => '125', 'height' => '20', 'layout' => 'button_count')); ?>

This is the resulting html in page source:

<fb:like href='http://mydomain.com/page/' send='false' layout='button_count' show_faces='true' width='125' height='20' action='like' colorscheme='light' font='lucida+grande'></fb:like>

Answer 1

Thanks to SO: https://stackoverflow.com/questions/10471848/css-z-index-overflow-facebook-xfbml-and-safari

Turns out I needed positions and z-indexes, but also this on the containing <div>, which uses a "clearfix" trick (instead of using overflow:hidden) to make #main wrap its floated children:

Original:

#main {
clear: both;
padding: 5px 0 0 0;
position: relative;
z-index:1;
overflow:hidden  /*removed */
}

Added:

#main:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  zoom: 1;
}