jquery is setting a inline style for height when i slideToggle...css3?

Question

Jquery is adding a inline style for height on my #shadowBox when i use slideToggle()I have no idea why this is happening or how to get rid of it... http://test.yamiko.org/cp/ is the page. The shadowBox is animated when you click login or contact.

//login script
$('#header a[title="Sign In"], #login>button').click(function()
{
    if($('#login').is(':visible'))
    {$('#login').slideUp(1000).parent('#shadowBox').delay(1000).fadeToggle(1000);}
    else{$('#shadowBox').fadeToggle(1000).children('#login').delay(1000).slideDown(1000);}
});

I have tried $('#shadowBox').height($(document).height()); but it gets overwritten by the inline style.

Answer 1

The slideDown method allows an optional callback, you could change

$('#shadowBox').fadeToggle(1000).children('#login').delay(1000).slideDown(1000);}

to

$('#shadowBox').fadeToggle(1000).children('#login').delay(1000).slideDown(1000, function() { 
  $('#shadowBox').height("100%"); 
});

If you want to remove the height altogether you could change my last example to

$('#shadowBox').fadeToggle(1000).children('#login').delay(1000).slideDown(1000, function() { 
  $('#shadowBox').height(""); 
});