FACELETS + JSF + RICHFACES quebra de layout no IE pois some o doctype

Front-end
#1

Olá pessoal,

Somente no internet explorer minha aplicação perde o layout.
Como teste peguei o html gerado pela aplicação e salvei num arquivo, abri com firefox e esta OK, mas quando abro no IE dá o mesmo problema, a página fica toda quebrada.

Daí notei que estava sem o doctype, abri esse arquivo e inseri o doctype, e tudo funcionou!!! Ou seja, parece que o problema é que
o doctype some da página quando ela é gerada na aplicação. O que eu simplesmente fiz foi copiar o codigo fonte e acresentar o doctype que a página ficou perfeita.

Alguma ideia do que possa ser? Vi um pessoal com o mesmo problema, mas eles usam ICE FACES, e resolveram com um componente lá(http://www.icefaces.org/JForum/posts/list/15782.page).

Se acharem necessário, está um pouco grande mas aih vai meu template e página.

Meu template: publicTemplate.xhtml

<?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">

<ui:composition	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:a4j="http://richfaces.org/a4j"
		xmlns:sec="http://www.springframework.org/security/facelets/tags"
		xmlns:r="http://richfaces.org/rich"
>

<head>
<title>
	<ui:insert name="title">
		Comunidade PES - Inovando seu modo de jogar!
	</ui:insert>
</title>
		
<!-- - - - - - - - - - - - - - - - - - - - - -
Author :  Nerit
- - - - - - - - - - - - - - - - - - - - - -->

<!-- Meta Tags -->
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots"      content="index, follow" />
<meta name="description" content="" />
<meta name="keywords"    content="" />
<meta name="author"      content="" />

<!-- Favicon -->
<link rel="shortcut icon" href="" />

<!-- CSS -->
<link rel="stylesheet" href="#{facesContext.externalContext.request.contextPath}/style/style.css" media="all" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="style/ie6.css");" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="style/ie7.css");" /><![endif]-->

<!-- Script  -->
<script type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/js/gerais.js"></script>
	
</head>
	
<body>
<div class="Wrap">
	<div id="header"> 
	
        <div id="areaOne">
        	<h1> <a href="#"><span>Comunidade Pes </span></a></h1>
        </div><!-- /areaUm -->
    
    	<!-- LOGADO MOSTRA BOTOES PARA CADASTRO E LOGIN -->
       	<sec:ifNotGranted roles="ROLE_USER,ROLE_ADMIN">    
	        <div id="areaTwo">
	       	     <a href="#" class="Btn01 Show"><span> login</span> </a>
	          
	          <div class="Hidden">
	            <div id="form">
		            <form class="form_login" action="#{facesContext.externalContext.request.contextPath}/j_spring_security_check" method="post">
	                	<p class="Txt"> Email: </p>
						<input class="Text" name="j_username" type="text" value="${not empty login_error ? SPRING_SECURITY_LAST_USERNAME : ''}"/>
	                	<p class="TxtB"> Senha: </p>
						<input class="Senha" name="j_password" type="password"/>
	                	<button id="submit">ok</button>
					</form>
	                <div class="Clear"> </div>  
	                <p class="Micro">Não Lembro a Senha</p>
	            </div><!-- / menuForm -->
	        </div><!-- / Hidden -->
	       
	        </div><!-- /areaDois -->
	       
	     	<div id="areaThree">
	             <a href="#" class="Btn02"><span> Cadastre</span> </a>
        	</div><!-- /areaTres -->
        </sec:ifNotGranted> 
        <!-- FIM / MOSTRA BOTOES PARA CADASTRO E LOGIN -->

		<!-- LOGADO - MOSTRA DADOS DO USUARIO LOGADO -->    
        <sec:ifAnyGranted roles="ROLE_USER,ROLE_ADMIN">
	     	<div id="areaThreeB">
	     		<div class="LadoUm">
	       			<img src="#{facesContext.externalContext.request.contextPath}/images/img-avatar.png" class="Flutua" alt="avatar" width="44" height="43" />
	       			<p class="Txt1"> Olá Fulano, </p>
	       			<p class="Txt2"> Editar Perfil | Alterar Senha </p>
	      			<div class="Clear"></div>
	       
	       			<select name="">
	       				<option> Acesso Rápido </option>
	       			</select>
	     		</div><!-- /LadoUm -->
	     
	     		<div class="LadoDois">
					<a href="#{facesContext.externalContext.request.contextPath}/j_spring_security_logout"><span>Sair</span></a>
	     		</div><!-- /LadoDois -->
	       
	    	</div><!-- /areaTres --> 
        </sec:ifAnyGranted>
        <!-- FIM / MOSTRA DADOS DO USUARIO LOGADO -->
    
    </div><!-- /header -->
    
<div class="Clear"></div><!-- /Clear -->

	<div id="mainMenu">
       <ul>
       		<sec:ifNotGranted roles="ROLE_USER,ROLE_ADMIN">
	       		<li><a class="Icon01" href="#{facesContext.externalContext.request.contextPath}/index.jsf">Página Inicial</a></li>
	            <li><a class="Icon02" href="#">Parceiros</a></li>
	            <li><a class="Icon03" href="#">Contato</a></li>
	            <li><a class="Icon04" href="#">O que é</a></li>
            </sec:ifNotGranted>
            
            <sec:ifAnyGranted roles="ROLE_USER,ROLE_ADMIN">
	       		<li><a class="Icon01" href="#{facesContext.externalContext.request.contextPath}/private/userHomeVW.jsf">Home</a></li>
	            <li><a class="Icon02" href="#{facesContext.externalContext.request.contextPath}/private/gameCreateVW.jsf">Criar Jogo</a></li>
	            <li><a class="Icon03" href="#{facesContext.externalContext.request.contextPath}">Comunidades</a></li>
	            <li><a class="Icon04" href="#{facesContext.externalContext.request.contextPath}">Meus Jogos</a></li>
            </sec:ifAnyGranted>
        </ul>
    
    </div><!-- /mainMenu -->
        <div class="Clear"></div><!-- /Clear -->

	<ui:insert name="centralContent">
	    <div id="Cont">
	    </div><!-- /vitrine -->
    </ui:insert>
    
    <div id="footer">
        <div id="areaFour"> 
         <p> Parceiros </p>
        
         <ul> 
         	<li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
            <li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
         	<li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
         	<li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
        </ul>
        </div><!-- /areaFour -->
        
        <div id="areaFive">
        
        <p> Todos os Direitos Reservados </p>
        <p class="Nerit"> <a href="#"><span> Nerit</span> </a></p>
        
        </div><!-- /areaFive -->

    </div><!-- /footer -->
		
</div><!-- /Wrap -->

</body>
</ui:composition>

Minha página de login: login.xhtml

<?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">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="templates/publicTemplate.xhtml">


<ui:define name="centralContent">

<br/>
Usuário e/ou senha inválidos. Faça login novamente. <br></br><br></br>
<form action="j_spring_security_check" method="post">
      <table>
        <tr>
        	<td>Login:</td>
        	<td><input type='text' name='j_username' value="${not empty login_error ? SPRING_SECURITY_LAST_USERNAME : ''}" /></td>
        </tr>
        <tr>
        	<td>Senha:</td>
        	<td><input type='password' name='j_password' /></td>
        </tr>
        <tr>
        	<td><input type="checkbox" name="_spring_security_remember_me" /></td>
			<td>Salvar as minhas informações neste computador?</td>
		</tr>
        <tr>
	        <td><input name="submit" type="submit" value="Login" /></td>
	        <td><input name="reset" type="reset" value="Limpar" /></td>
        </tr>
        
      </table>

    </form>

</ui:define>
</ui:composition>
#2

Resolvido, coisas que aprendi, com ajuda do Rafael Ponte.

Qualquer coisa fora do ui:composition é ignorado.
Neste seu caso voce nao precisa do ui:composition no lugar dele use a tag html direto. Ex: <html xmlns="http://www.w3.org/1999/xhtml" ?.. > ??. </html>
Só usa ui:composition se for trabalhar com composicao de paginas, como componentes, fragmentos de pagina ou estender um template.

Meu doctype era ignorado pois era escrito antes do Ui:Composition.

Então ficou assim:
Template:

[code]<?xml version="1.0" encoding="ISO-8859-1"?>

Comunidade PES - Inovando seu modo de jogar! 
    <div id="areaOne">
    	<h1> <a href="#"><span>Comunidade Pes </span></a></h1>
    </div><!-- /areaUm -->

	<!-- LOGADO MOSTRA BOTOES PARA CADASTRO E LOGIN -->
   	<sec:ifNotGranted roles="ROLE_USER,ROLE_ADMIN">    
        <div id="areaTwo">
       	     <a href="#" class="Btn01 Show"><span> login</span> </a>
          
          <div class="Hidden">
            <div id="form">
	            <form class="form_login" action="#{facesContext.externalContext.request.contextPath}/j_spring_security_check" method="post">
                	<p class="Txt"> Email: </p>
					<input class="Text" name="j_username" type="text" value="${not empty login_error ? SPRING_SECURITY_LAST_USERNAME : ''}"/>
                	<p class="TxtB"> Senha: </p>
					<input class="Senha" name="j_password" type="password"/>
                	<button id="submit">ok</button>
				</form>
                <div class="Clear"> </div>  
                <p class="Micro">Não Lembro a Senha</p>
            </div><!-- / menuForm -->
        </div><!-- / Hidden -->
       
        </div><!-- /areaDois -->
       
     	<div id="areaThree">
             <a href="#" class="Btn02"><span> Cadastre</span> </a>
    	</div><!-- /areaTres -->
    </sec:ifNotGranted> 
    <!-- FIM / MOSTRA BOTOES PARA CADASTRO E LOGIN -->

	<!-- LOGADO - MOSTRA DADOS DO USUARIO LOGADO -->    
    <sec:ifAnyGranted roles="ROLE_USER,ROLE_ADMIN">
     	<div id="areaThreeB">
     		<div class="LadoUm">
       			<img src="#{facesContext.externalContext.request.contextPath}/images/img-avatar.png" class="Flutua" alt="avatar" width="44" height="43" />
       			<p class="Txt1"> Olá Fulano, </p>
       			<p class="Txt2"> Editar Perfil | Alterar Senha </p>
      			<div class="Clear"></div>
       
       			<select name="">
       				<option> Acesso Rápido </option>
       			</select>
     		</div><!-- /LadoUm -->
     
     		<div class="LadoDois">
				<a href="#{facesContext.externalContext.request.contextPath}/j_spring_security_logout"><span>Sair</span></a>
     		</div><!-- /LadoDois -->
       
    	</div><!-- /areaTres --> 
    </sec:ifAnyGranted>
    <!-- FIM / MOSTRA DADOS DO USUARIO LOGADO -->

</div><!-- /header -->

<div id="mainMenu">
   <ul>
   		<sec:ifNotGranted roles="ROLE_USER,ROLE_ADMIN">
       		<li><a class="Icon01" href="#{facesContext.externalContext.request.contextPath}/index.jsf">Página Inicial</a></li>
            <li><a class="Icon02" href="#">Parceiros</a></li>
            <li><a class="Icon03" href="#">Contato</a></li>
            <li><a class="Icon04" href="#">O que é</a></li>
        </sec:ifNotGranted>
        
        <sec:ifAnyGranted roles="ROLE_USER,ROLE_ADMIN">
       		<li><a class="Icon01" href="#{facesContext.externalContext.request.contextPath}/private/userHomeVW.jsf">Home</a></li>
            <li><a class="Icon02" href="#{facesContext.externalContext.request.contextPath}/private/gameCreateVW.jsf">Criar Jogo</a></li>
            <li><a class="Icon03" href="#{facesContext.externalContext.request.contextPath}">Comunidades</a></li>
            <li><a class="Icon04" href="#{facesContext.externalContext.request.contextPath}">Meus Jogos</a></li>
        </sec:ifAnyGranted>
    </ul>

</div><!-- /mainMenu -->
    <div class="Clear"></div><!-- /Clear -->

<ui:insert name="centralContent">
	<div id="Cont"></div>
</ui:insert>

<div id="footer">
    <div id="areaFour"> 
     <p> Parceiros </p>
    
     <ul> 
     	<li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
        <li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
     	<li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
     	<li><a href="#"><img src="#{facesContext.externalContext.request.contextPath}/images/img-patrocinadores.png" /></a></li>
    </ul>
    </div><!-- /areaFour -->
    
    <div id="areaFive">
    
    <p> Todos os Direitos Reservados </p>
    <p class="Nerit"> <a href="#"><span> Nerit</span> </a></p>
    
    </div><!-- /areaFive -->

</div><!-- /footer -->
[/code]

Tela

[code]<?xml version="1.0" encoding="ISO-8859-1"?>

<ui:composition xmlns=“http://www.w3.org/1999/xhtml”
xmlns:ui=“http://java.sun.com/jsf/facelets”
template=“templates/publicTemplate.xhtml”>

<ui:define name=“centralContent”>


Usuário e/ou senha inválidos. Faça login novamente. 

  </table>

</form>

</ui:define>
</ui:composition>[/code]

Valeu!!

Login:
Senha:
Salvar as minhas informações neste computador?
#3