0

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?

screenshot

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>
  • The DIV in which contains the fly-out needs a position, i.e. position:relative; in order for the z-index to work on any child elements. You should also give the child element a position to. – Adam Apr 30 '12 at 14:46
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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.