Choosing between Facebook iframe scrollbar or page cut off halfway
- by pg.
I have an iframe tab in facebook. I used "overflow:hidden" in the body tag and this code at the bottom of my page:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize(100);
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
This removes the scrollbars and resizes the iframe. The problem is that my page is cut off after about 800px (that leaves about 400px). I've set the height in facebook to "fluid". It works absolutely fine in every other browser but not in IE8.
As a side question, why does IE still exist? It's the absolute worst thing. Anyways, I added this to the head:
<!--[if IE]>
<style>
body{overflow-y:scroll;}
</style>
<![endif]-->
But that just gets me back to having the scrollbars again.
