Design breakout in sliding panel

Question

Hi all :)

Please have a look at here: http://www.datespeed.net

Click on the login/register button, a panel will slide down, showing a login and register form.

The design holds in firefox and safari but not in IE. In IE there is a huge gap between the forms. When i use the developer tool in IE i see that the form is not enclosing the divs inside, but the form tag properly encloses the divs inside and tags. This is what i suppose causing the problem.

But i can't find the fix for it.

Please have a look

The CSS File: http://www.datespeed.net/styles/login_register.css.aspx

Answer 1

You have min-height set to 300px here:

div.home_page_container div.home_page_body div.code_area
{
    width: 24%;
    float: left;
    /*margin-left: 5px;*/
    min-height: 300px;
}

You also have min-height set to 100px here:

div.collapsible_login_block div.top_slice
{
    background-image:url('/images/backs/LoginRegister/block_top_slice_267x1.png');
    background-position:left top;
    width:160px;
    min-height:100px;
    background-repeat:repeat-y;
    padding-top:1px;
}

Modify the CSS to prevent the min-height applying to div.code_area and div.top_slice, and it formats correctly in IE. However, there seems to be a lot of CSS for a relatively simple layout. It might be worth you taking another look at it, and trying to reduce it down a little. I guess there's a lot of stuff left in there from the development process that is now no longer required.