jQuery animation bug: .slideToggle causes content to overlap during the animation in FF & IE, Safari is fine. What could cause this?

Question

First of all here is a link to the dev site I am currently working with. It features the form fields that are being animated using .slideToggle() .slideUp() & .slideDown().

Link: http://dev.supply.net.nz/copper/index.php/site/talent/

The CMS is Expression engine, but that shouldn't matter in this case.

Basically what you'll see happening is that when clicking through the different form fieldsets using the next > button is that the content of the fieldsets will temporarily overlap until the animation is complete.

This does not happen in Safari or Chrome. But does happen in Firefox and IE8 (other versions not yet tested).

While I think the best way to help me is by going through the site directly and seeing for yourself, below I have added the jQuery code that runs the slide animation:

// FORMS: Talent, expand & collapse.
// hide all non active fieldsets initially
$('fieldset.inactive').slideUp();

// animate expansion of fieldsets
$('button.nextFieldset').click(function() {
    $(this).parent('fieldset').slideUp('slow',function() {
            $(this).toggleClass('inactive');
            $(this).next().next().slideDown('slow', function() {
                $(this).toggleClass('inactive');
            });
    });
});

// clickable headers
$('#talentform h3').each(function(i) {
    $(this).click(function() {
        $(this).next().slideToggle('slow');
    });
});

// fix input type=file div height
inputHeight = $('#talentform input[type=text]').parent('div').height();
$('input[type=file],select.height').parent('div').height(inputHeight);


// GENDER selector
$('select#gender').change(function() {
    var gender = $(this).val();
    if (gender == 'female') {
        if ($('fieldset.male')) {
            $('fieldset.male').slideUp(300, function() {
                $(this).toggleClass('inactive');
                $('fieldset.female').slideDown('slow', function() {
                    $(this).toggleClass('inactive');
                });
            });
        } else {
            $('fieldset.female').slideDown('slow', function() {
                $(this).toggleClass('inactive');
            });
        }
    } else {
        if (gender == 'male') {
            if ($('fieldset.female')) {
                $('fieldset.female').slideUp(300, function() {
                    $(this).toggleClass('inactive');
                    $('fieldset.male').slideDown('slow', function() {
                        $(this).toggleClass('inactive');
                    });
                });
            } else {
                $('fieldset.male').slideDown('slow', function() {
                    $(this).toggleClass('inactive');
                });
            }
    } else {
        $('fieldset.male,fieldset.female').slideUp('slow');
    }}
});

Any ideas on why this would happen and where I the code I should can looking for a fix to this would be much appreciated.

Thanks for reading, I look forward to your suggestions or perhaps even solutions.

Kindest regards, Jannis

PS: This page is still in the early build stage so there are some errors (orphaned labels for instance) that have not been fixed just yet nor is the form functional yet. These things however should not be relevant for the animation to fire properly.