Недавно заметил проблемы с модальным окном(чтобы его открыть, нажмите справа регистрация guf.org.ua), в хроме оно улетает вверх, а должно находиться по центру, во всех остальных, даже в ИЕ все с этим нормально

#modal {
width:300px;
margin: -150px 0 0 -150px;
top:50%;
left:50%; 
}

но и конечно наш всеми любимый браузер не без своих подарком, он делает с окном не понятно что! Можите сами посмотреть, это не возможно описать))))
вот весь код

<div id="modal" class="modal">
<div id="modal_new_user_top"> </div>
<div id="modal_new_user_left"></div>
<div id="modal_new_user_right"></div>
<div id="modal_new_user_content"><div style="margin-left:3px;">
<form name="forma" method="post" action="#" id="forma">
<p><b>Введите желаемый логин:</b><br><input type="text" name="login" size="35" id="login"></p>
<p><b>Введите пароль:</b><br><input type="password" name="password" size="35" id="password"></p>
<p><b>Повторите пароль:</b><br><input type="password" name="passwordrefresh" size="35" id="passwordrefresh"></p>
<div id="otvet_server"></div>
</div></div>
<div id="modal_new_user_footer">
<center><p><input type="button"  class="class_btn"  value="Регистрация" onclick="reg()"> 
<input type="button" class="class_btn" value="Закрыть"onclick="closemodal()">
</form></center></p></div>
</div>

#modal {
width:300px;
margin: -150px 0 0 -150px;
top:50%;
left:50%; 
}
#modal_new_user_top{
background-image:url(img/system/modal/1_01.png);
height:56px;
}
#modal_new_user_left{
background-image:url(img/system/modal/1_02.jpg);
width:11px;
float:left;
height:130px;
}
#modal_new_user_right{
width:11px;
background-image:url(img/system/modal/1_04.jpg);
float:right;
height:130px;
}
#modal_new_user_content{
margin-top:-5px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
background-color:#000000;
margin-left:11px;
margin-right:11px;
height:130px;
}
#modal_new_user_footer{
background-image:url(img/system/modal/1_05.png);
height:56px;
clear:both;
padding-top:1px;
}