Bom dia !!
Estou usando alguns templates com facelets a algum tempo e só hoje percebi uma coisa nos meus HTML’s. Toda vez que uso um template, a tag BODY fica com a cor de fundo até o o último componentes.
Nunca tinha percebido isso porque a maioria de minhas páginas têm bastante conteúdo, então a área visível (BODY), era mais extensa que a tela do navegador.
Mas hj fiz um formulário com apenas um campo, daí que ví que a cor de fundo da tag BODY ia apenas até o meu último botão. Quando coloco um background na tag BODY, todo o fundo muda de cor, só que no template vai até o meio da tela. Isso no firefox, no IE está OK.
O que pode estar de errado?
Vou postar meu código aqui:
template.jsp:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:s="http://myfaces.apache.org/sandbox"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
>
<head>
<title>
<ui:insert name="title">Teste</ui:insert>
</title>
<ui:insert name="css">
<style type="text/css" media="screen">
@import url("<h:outputText value="#{facesContext.externalContext.requestContextPath}"/>/theme/default/css.css");
</style>
</ui:insert>
</head>
<body>
<h1><ui:insert name="titulo">Título</ui:insert></h1>
<ui:insert name="ficha"> </ui:insert>
</body>
</html>
index.jsp
<?xml version="1.0" encoding="iso-8859-1"?>
<!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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:s="http://myfaces.apache.org/sandbox"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
>
<ui:composition template="../template/template.jsp">
<ui:define name="title">Título</ui:define>
<ui:define name="ficha">
<form id="cad" action="ir">
<fieldset>
<legend>Dados Pessoais</legend>
<ul>
<li>
<label for="cad:cpf">CPF do Candidato:<span>*</span></label>
<input type="text" id="cad:cpf" class="field"/>
<p >Campo requerido. Preencha este campo apenas com números. O sistema pontuará o CPF automaticamente</p>
</li>
</ul>
</fieldset>
<input type="button" value="Próximo Passo" />
</form>
</ui:define>
</ui:composition>
</html>
e o CSS:
* {
padding:0;
margin:0;
}
body { background:#333366;}