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.
