Home/ Questions/Q 9076015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T19:00:44+00:00

I’ve got weird problem. I’m trying to add Facebook Like Button on my website,

  • 0

I’ve got weird problem. I’m trying to add Facebook Like Button on my website, but it doesn’t show up in Internet Explorer and Firefox. Yes, I’ve already added this:

<html xmlns:fb="http://ogp.me/ns/fb#">

and FB-Root and JS SDK. Whenever I’m trying to add XFBML or HTML5 version, it always doesn’t show up in IE and Firefox. In Chrome and Safari it works well.

However, when I leave cursor on the button that is displaying div that contains FB like box over the mouse hover, it will display properly. Also, when I put this like button in any other place on my site, it will show up.

Here’s the code:

<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span> 
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>  
</div>
</a>
</li>

It looks like Firefox and IE are rendering this box at the start of loading the page. However, they leave space for them. It’s weird.

I wish you could help me. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK, so I found solution for this problem.

    Firstly, I’ve clear up all z-index in my css file and set z-index: 8; for .box_pop.

    Secondly, set .ikonka div to display: none; and leave .ikonka:hover div with nothing (you can just don’t put this in css).

    Thirdly, I’ve set up some jQuery:

     <script>
 $(document).ready(function() {
 $('#your-li-id').hover(function() {
 $(this).addClass('pretty-hover');
 }, function() {
 $(this).removeClass('pretty-hover');
 });

 });
 </script>

    Note: where is #your-li-id you must put here id of your li element. This script will add pretty-hover class to your li. Then, in CSS, put this:

    .pretty-hover div{
    display: block;
}

    It should work now.

    As you can see, you mustn’t set display: none; into your CSS and then – also via CSS – just add display: block; on hover.

    If you will do that, iFrame won’t be visible in IE or even FF. You must do this trick with jQuery.

    • 0