If you visit this website http://inelmo.com/inelmo and click on one of the comments links under each article it expands a div which contains a facebook comments plugin. I don't know why, but there is a huge space after it, I am pretty confident it has nothing to do with my styling (although I might be wrong).
The markup for that bit looks like this:
<div id="cmbx(id of the article)" class="comentBox" style="display: none; width: 520px;"> // This is the div that hides facebook comments.
<div class="fb-comments" data-href="inelmo.com/story.php?id=(id of the article)" data-num-posts="5" data-width="520"></div>
</div>
I have no idea about what is causing that space under facebook plugin. Can anyone suggest any fixes?
jQuery used for slide:
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
EDIT: I tested it in several browsers, some e.g. Firefox do not have any issues, but google chrome for example has.
I don't think your problem is related to your CSS or the Facebook comment box directly, although it seems to be the comment box that is causing problems to begin with. The actual problem seems to be with the jQuery slide function, which would definitely be hard to debug because the problem at first glance seems to be with the css or fb-comments.
Check out this post, it should be of some help to you. http://blog.pengoworks.com/index.cfm/2009/4/21/Fixing-jQuerys-slideDown-effect-ie-Jumpy-Animation
The post talks about a very similar issue that seems to be caused by jquery slide not knowing in advance what the height of the div is going to be. HTH