jQuery slideDown problem

When you click on the login button ,shows some space when the slideDown event is running. What causes that white space?

Here's the page - http://rssreaderbg.net/pubsubbub/example/cssexam/index.php

$("#login").click(function() {
    $("#loginform").slideDown();
    $("#home").attr("class","");
    $("#login").attr("class","selected");
});

#nav {
    float:left;
    margin-left:100px;
    padding-top:17px;
    list-style-type:none;
}

#nav li {
    display: inline-block; /*  ??? ??????? ?? ????? ?? inline*/
    padding-right:0px;
    float:left;
}

#nav a {
    display: inline-block; /*  ??? ??????? ?? ????? ?? inline开发者_运维知识库*/
    padding-left:9px;
    float:left;
    height:52px;
    color:white;
    float:left;
    font:28px Microsoft Sans Serif;
    text-decoration:none;
    background: url(left.png) no-repeat;
}

#nav a strong {
    display: inline-block; /*  ??? ??????? ?? ????? ?? inline*/
    padding:6px 19px 0 0;
    margin-left:9px;
    height:52px;
    float:left;
    padding-top:10px;
    cursor:pointer;
    background: url(button.png) no-repeat right top;
}

#nav a:hover{
    background: url(lhover.png) no-repeat;
}

#nav a:hover strong {
    background: url(lbutton.png) no-repeat right top;
}
#nav a.selected {
    cursor:default;
    background: url(lhover.png) no-repeat;
}

#nav a.selected strong {
    cursor:default;
    background: url(lbutton.png) no-repeat right top;
}
#nav a.selected:hover {
    cursor:pointer;
    background: url(lhover.png) no-repeat;
}

#nav a.selected strong:hover {
    cursor:pointer;
    background: url(lbutton.png) no-repeat right top;
}

its most likely a margin problem but use a wrapper to wrap everything together and give it a background of the same colour as the form :)