Question

I have the following view:

<!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:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>

    <title>Revenue/Expenses Login</title>

    <link rel="stylesheet" type="text/css" href="resources/css/styles.css" />

</h:head>
<body>

    <h:form id="login">

        <!-- <p:graphicImage url="img/logog.JPG" width="448" height="119" /> -->

        <p id="paragraph">Enter username and password.</p>

        <p:outputLabel for="username" value="Username:" />

        <p:inputText id="username" value="#{loginController.login.tbcodusr}"
            required="true" requiredMessage="You must enter a Username." />

        <p:outputLabel for="password" value="Password:" />

        <p:password id="password" value="#{loginController.login.tbpswusr}"
            required="true" requiredMessage="You must enter a Password." />

        <p:messages autoUpdate="true" for="usuarioPassword" />

        <p:commandButton value="Login" action="#{loginController.login}" />

    </h:form>

</body>
</html>

Before I did any changes to the JSF version, the CSS was working fine. But now, when I go to the screen, the CSS is acting differently. The css looks like this:

body {
    font-family: Calibri;
    color: #555555;
}

.mainContainer{max-width: 1000px;margin:0 auto;}

h1 {
    font-weight: 300;
    font-size: 32px;
    margin: 0.6em 0px 0.6em 0px;
    font-family: Calibri;
    display:block;
}

h2 {
    font-weight: 300;
    font-size: 24px;
    margin: 0.6em 0px 0.6em 0px;
    font-family: Calibri;
    text-decoration: underline;
    font-style: italic;
    display:block;
}

a {
    color: #f20553;
    text-decoration: none;
}

a:hover {
    color: #D80649;
    text-decoration: none;
}

/*login */

#login
{
    max-width: 500px;
    margin:0 auto;
}

#login p
{
    font-size: 18px;
    font-family: sans-serif, Arial, Helvetica;
}

#login label
{
    padding-top: 0.2em;
    display: block;
    margin-bottom: 0.1em;
    text-align: left;
    color: #262060;
    font-weight:bold;
    font-family: sans-serif, Arial, Helvetica;
}

#login button
{
    margin-top: 0.2em;
}

#login input[type='text'], #login input[type='password']
{
    border:1px solid #CECECE;
    font-family: sans-serif, Arial, Helvetica;
    width: 100%;
    font-size: 12px;
    font-weight: 200;
    padding: 5px;
    box-sizing: border-box;
}

/* login end */

.searchLink{font-size:12px;display:block;width: 9em;}

.containers{line-height: 2;}


.containers label{display:block;}

What happened when I upgraded to JSF 2.2? I read this and followed instructions. What am I missing?

Also, when I click on the Login button, nothing happens. What is going on?

strange behavior when changing from JSF 2.0 to JSF 2.2

0 个答案: