Hidden Div flows into header when shown via jQuery (only happens in IE)

To see what I mean, check out my source here in IE. When you click the login button (right now it is just wired to show and hide divs and not actually log anyone in), the login panel is hidden and the welcome panel is shown, but it is right up against the top header until you click the page again. I cannot figure out why this is happening. Natural开发者_JS百科ly, it is only happening in IE and does not occur in FF, Chrome and Safari. Does anyone know what is causing this issue?

Thanks in advance.

Sorry I just thrown a routine fix which doesn't work here.

Make the following css changes:

#div1, #div2


{
    background: #999;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-top:0;
  }



#div1 #login-form, #div2 #div2-header 
 { 
 padding-top:10px;
 }