https://stackoverflow.com/questions/18817054
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianMaybe try an overflow:auto on the container of the facebook embed? So put it on #fbook
Facebook Like box not expanding container div
-
28-06-2022 - |
Pregunta
I have just copied the code for a Facebook Like box into a new site design I am building but when it loads it's not expanding the containing div.
Also I've noticed that it will disappear sometimes and the page needs to be refreshed to bring it back.
What is causing it not to expand the div. I thought it was to do with a float but can't see one that will affect it.
I've attached the xhtml/css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Anton|Oswald' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="body">
<div class="body_bottom">
<div class="body_top">
<div id="header">
<img src="images/banner.jpg" />
</div>
<div id="content">
</div>
<div id="sidebar">
<div class="sidebar_item">
<div class="sidebar_item_top"></div>
<div class="sidebar_item_pad">
<p>Get updates for our latest news, events and blogs.</p>
<form id="addressform" action="/" method="get">
<div class="textl1"><label id="namLbl" for="mlName">Name</label><input type="text" id="mlName" name="mlName" /></div>
<div class="textl1"><label id="emlLbl" for="mlEmail">Email</label><input type="text" id="mlEmail" name="mlEmail" /></div>
<div class="textr1"><input type="submit" id="mlbutton" name="mlbutton" value="" class="button-signup" /></div>
<p id="response" style="text-align: left"></p>
</form>
</div>
<div class="sidebar_item_bottom"></div>
</div>
<div class="sidebar_item">
<div class="sidebar_item_top"></div>
<div class="sidebar_item_pad">
<div id="fbook">
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
<br style="clear:both">
</div>
<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.src = "http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=151487781542911";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).bind("load resize", function(){
var container_width = $('#fbook').width();
$('#fbook').html('<div class="fb-like-box" ' +
'data-href="https://www.facebook.com/adobegocreate"' +
' data-width="' + container_width + '" data-height="730" data-show-faces="true" ' +
'data-stream="false" data-header="false"></div>');
FB.XFBML.parse( );
});
</script>
</div>
<div class="sidebar_item_bottom"></div>
</div>
<div class="clearboth"></div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
and the css
body {
background: #f2f2f2;
}
#header {
}
#container {
width:1009px;
margin:20px auto;
}
#largeimage {
float:left;
width:943px;
margin: 10px 0 10px 8px;
}
#content {
float:left;
width:620px;
margin: 11px 19px 0 9px;
}
#sidebar {
float:left;
width:304px;
}
.clearboth {
clear:both;
}
#footer {
clear:both;
width: 962px;
height:208px;border-top:1px dotted #CCCCCC;padding:10px 0;background: #373737 url(../images/sniper_scope.jpg) no-repeat 15px 10px;
margin: 10px 22px;
}
.body {
background: url('../images/body_center.png') repeat-y;
width: 1009px;
}
.body_top {
background: url('../images/body_top.png') no-repeat;
width: 1009px;
padding: 0px 24px;
}
.body_bottom {
background: url('../images/body_bottom.png') no-repeat bottom;
width: 1009px;
}
.img_top {
background: url('../images/img_top.png') no-repeat;
height: 8px;
width: 943px;
}
.img_center {
background: url('../images/img_center.png') repeat-y;
width: 943px;
}
.img_pad {
margin: 2px 8px 2px;
}
.img_bottom {
background: url('../images/img_bottom.png') no-repeat;
height: 15px;
width: 943px;
}
#contentimg {
border: 1px solid #CECECE;
}
.content_item_top {
background: url('../images/content_item_top.jpg') no-repeat;
width: 623px;
}
.content_item {
width: 623px;
margin: 0 0 15px;
}
.content_item_main {
border: 1px solid #CECECE;
padding: 10px 22px;
}
.content_item_bottom {
background: url('../images/content_shadow.png') no-repeat;
height: 9px;
width: 623px;
}
.sidebar_item_top {
background: url('../images/sidebar_item_top.jpg') no-repeat;
height: 39px;
width: 304px;
}
.sidebar_item {
background: url('../images/sidebar_item_centre.jpg') repeat-y;
width: 304px;
margin: 0 0 15px;
}
.sidebar_item_pad {
margin: 5px 26px 12px;
}
.sidebar_item_bottom {
background: url('../images/sidebar_item_bottom.jpg') no-repeat;
height: 9px;
width: 304px;
}
ul.footerlist {
float:left;
list-style-type:none;
padding:20px 16px;
}
ul.footerlist li {
font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
font-size:10px;
color: #373737;
}
#footer h5 {
font-size:120%;
color: #E5DFCA;
}
#footertop, #footerbottom {width:710px;float:right;}
#footerbottom p{font-size:11px;color:#f0f0f0;font-style:normal;font-weight:normal;margin:0;padding:0px;line-height:20px;text-align:left;}
#footertop a{color:#f0f0f0;text-decoration:none;}
#footertop a:hover{color:#c3c3c3;text-decoration:underline;}
h1, h2 {
margin:0;
/*font-family: 'Anton', sans-serif;*/
font-family: 'Oswald', sans-serif;
color: #1a1e1c;
}
p {
font-family: tahoma;
font-size: 10pt;
color: #424242;
line-height:20px;
}
#fbook {
}
Solución
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
