jQuery slide-out Facebook like box looks different in Chrome and Firefox

Question

I'm trying to add a Facebook slide-out like box to a site and have got the mechanism working well in Chrome but in Firefox and IE it doesn't retract all the way and it also doesn't fill the entire box with the background color. Can anyone let me know what I'm missing?

The live URL is: http://www.campyavneh.org/social-network-slider-test

Here's a JS Fiddle which seems to work well in both browsers so I'm not sure what I'm screwing up on the live site: http://jsfiddle.net/U9nw6/8/ and here's the necessary code:

    <script>
jQuery(function($) {
    $(document).ready(function() {
        $('#panelHandle').hover(function() {
            $('#sidePanel').stop(true, false).animate({
                'left': '0px'
            }, 900);
        }, function() {
            jQuery.noConflict();
        });

        jQuery('#sidePanel').hover(function() {
            // Do nothing
        }, function() {

            jQuery.noConflict();
            jQuery('#sidePanel').animate({
                left: '-201px'
            }, 800);

        });
    });
});
</script>

    /* Slide out social networking */
    #sidePanel {
        width:292px;
        position:fixed;
        left:-292px;
        top:15%;
        height:590px;
    }
    #panelHandle {
        height:128px;
        width:40px;
        border-radius:0 5px 5px 0;
        float:left;
        cursor:pointer;
    }
    #panelContent {
        float:left;
        width:292px;
        height:590px;
        background-color:#EEEEEE;
    }
    #panelHandle img {
        left: 292px;
        position: relative;
        top: -590px;
    }

<div id="sidePanel">
        <div id="panelContent">
          <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcampyavneh&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=132179142482" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>     
        </div>
    <div id="panelHandle"><img src="/sites/all/themes/yavneh/images/fb_logo_side.jpg" alt="Facebook"></div>
</div>​

Thanks for any help you can provide!

Answer 1

For the background problem, you need to add a line to your div iframe tag that should be something like this:

background: #ccc

where #ccc can be the hex code or whatever of the colour you want to fill

Answer 2

将iframe更改为

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcampyavneh&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=132179142482" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>

Answer 3

Update #sidePanel handling to:

jQuery('#sidePanel').hover(function() {
  jQuery.noConflict();
  jQuery('#sidePanel').animate({
    left: '-201px'
  }, 800);
 });