scroll bars showing up in iframe, width is only 500px, height set to fluid_问答_开发者

I cannot for the life of me figure out why there are scroll bars appearing on my iframe Page tab. The width is set at 500px, after knocking it down 5px at a time from 515px. There are no margins, and the height setting is on "fluid." When I view the html page that the iframe is showing directly, there is no extra white space, so it looks like Facebook is adding white space (a margin or pad?) on the left side of the iframe. The odd thing is that the scroll distance has remained the same as I've narrowed the page down from 515px to 500px. Further, the "fluid" option for the height does not seem to be applying to the iframe, so I can't use the hidden tag in my CSS or half of my content is chopped off.

Is this an issue for anyone else, or am I just doing something wrong? I'll post the code for the page below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index_loc3</title>
<link rel="stylesheet" type="text/css" href="loc_styles.css" />
<script language="javascript" src="facebox/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css"  />
<script language="javascript" src="facebox/facebox.js"></script>


<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a[rel*=facebox]').facebox()
    })
</script>

</head>

<body>

<div id="container" style="width:500px">

    <div id="header">
<开发者_开发问答a href="http://www.fwymca.org"><img src="images/logo_slice.jpg" alt="" width="199" height="152" hspace="8" vspace="40" align="left"  /></a>
<img src="head_images/ymca1.jpg" align="right">
    </div>
    <div id="name"><img src="images/text_slice.jpg" alt="YMCA of Greater Fort Wayne" width="485" height="37" hspace="12" />
</div>
<br />
    <div id="content1"><a href="cent_popup.html" rel="facebox"><img src="images/cent_loc3.jpg" vspace="5"></a>

   <a href="park_popup.html" rel="facebox"><img src="images/park_loc3.jpg" alt="Parkview Family Y" vspace="10"></a>
   <a href="wells_popup.html" rel="facebox"><img src="images/wells_loc2.jpg" alt="Wells County Y" vspace="6"></a>
  </div>
  <div id="content2"><a href="jorg_popup.html" rel="facebox"><img src="images/jorg_loc3.jpg" vspace="5"></a>
  <a href="renpt_popup.html" rel="facebox"><img src="images/ren_loc3.jpg" width="240" height="216" vspace="10"></a>
  <a href="whit_popup.html" rel="facebox"><img src="images/whit_loc3.jpg" vspace="5"></a>
  <a href="camp_popup.html" rel="facebox"><img src="images/camp_loc3.jpg" vspace="5"></a>
  </div>
</div>

</body>
</html>

UPDATE: I found a bit of code that got the iframe to resize properly and get rid of the scroll bars. However, this seems to have caused my Facebox implementation to get messed up. It doesn't appear Facebox recognizes the change in screen position to change the center for Facebox, so it is popping up at the top of the page instead of the current center of the screen.

I had a similar problem where I had vertical and horizontal scrollbars being shown even when they were inactive (in Opera and Firefox, while in IE and Chrome the page was shown without the scrollbars). I had "fluid" height and width selected in the application settings. The problem finally disappeared when I reverted the height setting to "settable" and used the FB.Canvas.setSize function again.

To me it seems that Facebook's "fluid" setting for the height isn't working correctly for all browsers at the moment, maybe try setting it back to settable and going from there.

go to https://developers.facebook.com/apps/YOUR_APP_ID/advanced then
scroll to Canvas Settings then set Canvas Width and Canvas Height as you wish