1

I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.

My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?

I have looked at these questions and implemented their answers with no luck in fixing the issue:- facebook iframe App: Send/Like button z-index issue

Other fixes I have found that did not work were:-

  1. Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)

  2. Changing the z-index of the classes that are listed in the answer from the link above.

  3. Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-

All I would like is the flyout to appear on top of all elements on the page without having to change the layout.

Here is the link to my site http://mikelonsdale.co.uk

Thank you for your time and help.

Community
  • 1
  • 1
Yokocapolo
  • 168
  • 2
  • 10

3 Answers3

1

Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.

Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).

Overflow Stack
  • 833
  • 5
  • 9
  • I was hoping to avoid using negative values because of the firefox 2 bug but seen as I have had no luck with fixing it any other way and no one has commented you can have top marks, thank you very much for the help. – Yokocapolo Oct 17 '13 at 14:03
1

The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).

.fb-like span {
    overflow: visible !important;
    width: 450px !important;
    margin-right: -375px;
}
user3926153
  • 11
  • 1
1

I added 

    .fb-like span {
    z-index: 999999999999999;
}

to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.

ott
  • 149
  • 2
  • 12