Div fica cortada?

[Rodrigo Graça 0]

É o seguinte, estava aqui a editar um formulário de login que faz aquele efeito de "sliding" e acontece que quando a janela está em fullscreen esta tudo bem mas quando mudo para janela mais pequena que um X tamanho é cortada uma zona da div, como podem ver abaixo.

Eu consegui fazer com que isso não acontece-se modificando a linha que se segue:

#toppanel {
    position: absolute;

para

#toppanel {
    position: relative;

Mas ai acontece outra coisa que está descrita em comentário que é o conteúdo da página vai para baixo o que não quero que aconteça.

Alguém tem alguma ideia de como resolver o problema do corte de outra maneira ou resolver este de o conteúdo ir para baixo?

Deixo aqui o código para que me possam ajudar.

http://hotfile.com/dl/132933439/64b8e49/2.rar.html

[KTachyon 276]

Quando estás a desenvolver para a web, ajuda muito usar as potencialidades de alguns browsers que apresentam todas as propriedades de objectos, para conseguires perceber porque é que, por exemplo, a div sai cortada.

Se pegares no Chrome ou no Safari tens um inspector que te permite, não só, ver as propriedade, mas também assinalar o espaço das divs visualmente. Torna-se mais fácil de analisar o problema que olhar simplesmente para código.

[Rodrigo Graça 0]

@KTachyon

Hehe, isso estou farto de fazer! É muito mais prático isso é! Eu quase que programo lá, porque posso mudar valores, eliminar, etc etc tudo sem sair dali ou fazer F5.

EDIT: acontece o mesmo em todos os browsers mas maioria das vezes estou no chrome.

[Rodrigo Graça 0]

@KTachyon

Embora já conhece-se a dica estive agora durante 30 minutos a usa-la tanto que achei a solução!

Desta vez programei mesmo lá, fui ao CSS criei uma div nova e comecei a fazer testes copiava e colava códigos CSS quase ao calhas nela até que de-repente já não cortava ai decidi ver se fazia o conteúdo ir para baixo e não fazia, depois foi só retirar um monte de atributos de CSS que estavam amais e descobrir quais estavam realmente a fazer aquele efeito.

Acabei com a seguinte solução, criei uma div que envolve-se a outra (toppanel) com 100% de tamanho (para ficar no ecrã todo e a outra centrar dentro dessa) e com (position: relative;) que ao não lhe especificar tamanho faz ficar fixa lá em cima e a outra tem o position: absolute; que faz deslizar dentro da outra sem empurrar o conteúdo para baixo.

Obrigado a todos pela ajuda.