resizing facebook tab according to content - facebook

Question

I was using this code before head tag to set the size of the canvas on the tab:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize( {height: 1500} );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize( {height: 1500} );
}
</script>
then before the closing body tag
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '<<app id here>>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
This worked fine but lot of hassle getting it just right in different browsers. Found another lot of code on here which was as below:
<script type="text/javascript">
fb_root = document.createElement( 'div' );
fb_root.id = 'fb-root';
try
{
window.document.childNodes[0].appendChild( fb_root );
}
catch( error )
{
window.document.body.appendChild( fb_root );
}
window.fbAsyncInit = function() {
FB.init({
appId : '561492603881225', //your app ID
status : true, // check login status
cookie : true // enable cookies to allow the server to access the session
});
//FB.Canvas.setSize({ width: 520, height: 1400 });
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
var mySetSize = function() {
var height = getDocHeight();
FB.Canvas.setSize({ width: 520, height: height });
setTimeout( mySetSize, 200 );
};
setTimeout( mySetSize, 200 );
};
(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);
}());
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
rules = document.createTextNode('body { position: relative; max-width: 520px!important;width: 520px!important; overflow: hidden!important; margin: 0px!important; }');
style.type = 'text/css';
if(style.styleSheet)
style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);
</script>
Now this worked seemlessly on this first tab https://www.facebook.com/PaycoServices/app_547127248642465 however using it on another like this one https://www.facebook.com/PaycoServices/app_561492603881225 it leaves a white gap at the bottom, any idea why?