Facebook like box and facepile not showing in Explorer and Firefox

Question

After integrating a Facebook likebox and facepile in my header of my website (http://d-dayinfo.org/) I saw, the same box which seems to be fine on Chrome, does not show up when visiting the page on Internet Explorer and Firefox.

Any idea how to work around this? because when I look into my code on Firefox, it identifies its there but you just can't see it. already tried to add some z-indexes but nothing has changed.

My Facebook code:

<div class="likefaces"><div class="fb-like" data-href="https://www.facebook.com/pages/D-dayinfo/278814998819693" data-width="340" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div>

My Facebook js code:

      <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.async=true;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=###############";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

My css code:

.likefaces {
    top:0px;
    padding-top: 25px;
    padding-bottom: 35px;
    padding-left: 17px;
    padding-right: 17px;
    position: absolute;
    margin-left: 295px;
    background-image: url(style/images/header2.png);
    width: 336px;
    height: 50px;
}

Answer 1

You need to log in to Facebook or the Facepile will not show up.