Fancybox for an HTML page looks different in in Firefox vs Chrome or Safari

Question

I am using fancybox to make an HTML page pop up over another page in a Wordpress template. When I look in Safari and Chrome, the size of the pop-up window is good and consistent. When I open it in Firefox, the pop-up window is only about 50px tall and makes you scroll down to see more content. I'm not sure which part of the code will be best to show, so here is the jquery section for fancybox that I'm using in the header of my template

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
    $(".fancylink").fancybox({
    'hideOnContentClick' : true,
    'type' : 'iframe',
    'padding' : 0,
    'onComplete' : function() {
        $('#fancybox-frame').load(function() { 
            ('#fancybox-content').height($(this).contents().find('body').height()+30);
        });
    }});
});
</script>

If any other part of the code will help in answering this question, please let me know and I will provide it. I am very much a beginner with jquery, so you can assume that I need to know the basics :)

Answer 1

It might be the reason that by default autoSize is set to true. try set the size to something like,

        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,