Problem with IE7 and vertically centered page

[cayohueso]

Hi,

I am having problems with a layout where the page is centered vertically. It looks good in FF, Safari, IE 6, Opera, but it cuts off parts of the page in IE7. Could you please take a look and give me your advice on what is wrong?

Thanks,
CH

Here is a link to the page: http://www.dyangochavez.com/clients/sonho_meu3/bios.html

If you want to see the difference, see the page in IE6 and IE7

I have this code at the top of the page:


<!--[if gte IE 5]>
<style type="text/css">
#formwrap {top:50%}
#form1{top:-50%;}
</style>
<![endif]-->



And this is the general CSS code:


/* CSS Document */

* {margin:0;padding:0}

html,body{
height:100%;
background-color:#005ba9;
font-family:Arial, Helvetica, sans-serif;
}
#wrapper{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#outer{
display:table-cell;
vertical-align:middle;
}
#formwrap{
padding:5px;
position:relative;
left:50%;
float:left;
}
#form1{
width:801px;
position:relative;
text-align:right;
left:-50%;
}
#banner{
width:801px;
height:102px;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-position:left;
}
#navbar{
border-top: solid 1px #fff;
border-left: solid 1px #fff;
border-right: solid 1px #fff;
text-align:center;
width:801px;
height:30px;
background-color:#fec731;
margin-top:0px;
padding-top:0px;
}
#navbar ul{
padding-top:6px;
}
#navbar ul li{
font-weight:normal;
padding: 0 10px;
border-right: 1px solid #FFFFFF;
color:#FFFFFF;
display:inline;
font-size:90%;
text-transform:uppercase;
}
#navbar ul li.last{
border:none;
}
#navbar ul li a{
color:#FFF;
text-decoration:none;
}
#navbar ul li a:hover, #navbar ul li a:focus{
color:#000;
text-decoration:none;
}




#bottom_corners{
clear:both;
width:789px;
height:10px;
background-color:#ceeddf;
background-image:url(../images/bottom_corners_green.gif);
background-repeat:no-repeat;
border-left: 6px solid #005ba9;
border-right: 6px solid #005ba9;
}

#credit{
color:#fff;
font-size:0.8em;
margin-top:0;
margin-left: 2em;
margin-right: 2em;
}

#credit a{
color:#FFFFFF;
text-decoration:none;
}

#credit a:hover, #credit a:focus{
color:#FFFFFF;
text-decoration:none;
}

.creditleft{
float:left;
text-align:left;
}

[abduraooft]

Read http://www.codingforums.com/showthread.php?p=182254#post182254 on "How do I center my page on screen?" and follow.