[RESOLVIDO]css + enquadramento branco envolta de um facelets

Boa noite galera!

Estou criando um projeto de faculdade e tenho um duvida relacionada ao comportamento da minha tela de login que segue abaixo:

[img]http://img254.imageshack.us/img254/9996/capturadetelade20120823.png[/img]

O problema que está ocorrendo são estes espaços no cantos superiores, inferiores, acima do header e abaixo do footer da pagina, tal como o scroll que aparece na pagina.

Criei uma classe de modelo (facelets), que se utiliza de um folha CSS para organizar todo conteúdo. A mesma segue abaixo para facilitar a compreensão de todos:

template.xhtml (facelets)

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

   <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="resources/css/cssTemplate.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/loginLayout.css" rel="stylesheet" type="text/css" />
        <link rel="icon" href="https://lab.accurate.com.br/request/s/300/1/_/images/icons/favicon.png" type="image/gif"/>
        <title>Controle de Apontamento de Horas no JIRA</title>
    </h:head>

    <h:body>

        <div id="all">
            <div id="top">
                <ui:insert name="topo"></ui:insert>
            </div>

            <div id="content">
                <ui:insert name="conteudo"></ui:insert>
                <div id="clear"></div>
            </div>

            <div id="bottom">
                <ui:insert name="footer"></ui:insert>
            </div>
        </div>
    </h:body>

</html>

Arquivo CSS:

html, body {
    height: 100%;
}

#all {
    min-height: 100%;

}

* html #all {
    height: 100%; /* hack para IE6 que trata height como min-height */
}

/*Empurra o rodapé para o bottom*/
#all {
    position: relative;

}

#bottom {
    position: absolute;
    bottom: 0;
    height: 30px;
    background-color: #D7D7D7;
    width: 100%;
}

#top{
    height: 60px;
    background-color: #036fab;
    width: 100%;   
}
/*-------------------------------*/
#content {
    padding-bottom: 40px;
    margin-top: 10px;
}

Bom, a pergunta principal é, como posso tirar esse "enquadramento" branco envolto dos meus componentes?

Obrigado e um abraço a todos!

3 Respostas

Topicos relacionados