Facebook Like Button post to wall overlay the article

Question

I have a bit of problem here.

The Facebook like button on my web page when they click on the like button they will have an overlay popup window say to post it on their wall and the normal one should be like this

But mine after I click it goes under and I can't even click or do anything on it.

I don't know how to fix this because I'm not sure if this is the problem of the code or it is the layout of the page.

    <li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div></li>

Answer 1

Inspect your page with Firebug, find the Facebook overlay element and check if changing z-index of this element will fix it. If yes, just add the rule to your own CSS with !important attribute. I had issue of this kind few months ago and it worked fine for me.

Answer 2

I actually fixed by using these.

.fb_iframe_widget_lift {
    z-index: 1;
}

.entry {
    line-height: 1.5;
}

.content iframe {
    max-width: 1200%;
}

.entry p {
    padding-top: 1em;
    padding-bottom: 1em;
}

.entry img {
    max-width: 100%;
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
    margin-bottom: 15px;
    line-height: 1em;
    font-family: Helvetica;
    font-weight: normal;
}