Layout com Porcentagem

html, body {

margin: 0px;
padding: 0px;
height:100%;
background-image:url(../images/cima.png);
background-repeat:repeat-x;
background-position:top;
}

#all{
width:100%;
min-height:100%;
height:100%;
position:relative;
padding:0px;
margin:0px;
}

#header{
height:20%;
width:100%;
background-image:url(../images/crm.png);
background-position:center center;
background-repeat:no-repeat;
}

#middle{
width:100%;
height:80%;
background-image:url(../images/login.png);
background-position:center center;
background-repeat:no-repeat;
position:fixed;
}

#pos_form{
margin-top:21.5%;
}

Vou tentar explicar de uma maneira que todos entendam o que está acontecendo.

Tenho uma DIV que envolve toda a tela, #all.

Tenho uma que é o topo, #header.

Tenho uma que é o meio, #middle.

E tenho um formulário que posiciono ele no meio da DIV #middle, que é o formulário de login.

Na Div #middle, tenho uma imagem centralizada de fundo de 400px x 200px.

Criei uma tabela de 400px e centralizei na Div #middle para ficar na frente da imagem.

Daí no Form eu declarei um Margin-Top:20% para descer o Form. No FF 4.0 fica certo, mas no Chrome ele fica na risca da imagem.

Para verem:

Site

Testem nos navegadores que eu falei.

Não entendo porquê não funciona.