Panel Page in ADF Faces using Facelets not rendering correctly

Question

Hi, I am attempting to integrate facelets into a web app built using adf faces and am running into a problem with the panel page component. I have integrated facelets and adf faces without any problems by adding relevant jars (jsf-facelets and adf-facelets) to the project and specifying alternate facelets view handler in web.xml.
However, when I try to render any component inside <af:document> or <af:html> tags, all the font style in components seems to be lost ( all the text and input fields turn large and ugly!).
I tried to leave out the <af:document> tag and put the <f:view> inside some vanilla html instead, but then panelPage component dosen't render properly and I get following message on top of page :
"Skip navigation elements to page contents"
So seem to be in a bit of a catch 22. By the way, this all works fine if I don't use facelets (remove the facelets view handler from web.xml and page renders correctly).
Does anyone have any ideas or examples of panelPage rendering correctly with facelets or an alternative to using adf faces html tags that will allow panelpage to be displayed?
The following is the code from a simple test jspx page :
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
xmlns:af="http://xmlns.oracle.com/adf/faces"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>
<af:document>
<af:form>
<af:panelPage title="Title 1">
<af:panelHorizontal>
<af:panelGroup layout="vertical">
<af:outputLabel value="Username"/>
<af:inputText id="lo_username" value="" columns="20"/>
<af:objectSpacer width="1" height="10"/>
<af:outputLabel value="Password"/>
<af:inputText id="lo_password" secret="true" value="" columns="20"/>
<af:objectSpacer width="1" height="15" />
<af:panelHorizontal>
<af:objectSpacer width="50" height="1"/>
<af:commandButton id="lo_loginButton" text="Login"/>
</af:panelHorizontal>
</af:panelGroup>
<af:objectSpacer width="50" height="1"/>
<af:panelGroup layout="vertical">
<af:outputLabel value="Please use your windows account username"/>
<af:outputLabel value="and password to logon to the system"/>
<af:objectSpacer width="1" height="50"/>
</af:panelGroup>
</af:panelHorizontal>
</af:panelPage>
</af:form>
</af:document>
</f:view>
</jsp:root>

Answer 1

The problem was the <jsp:root> tag. Removed this tag and modified <af:document> to the following so that namespaces are declared :
<af:document xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
Page now renders properly using facelets.
Message was edited by:
mjc