Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question
    
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. –  userabuser Apr 30 '12 at 14:46

1 Answer 1

up vote 1 down vote accepted

Thanks to SO: http://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;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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