aspose file tools

The moose likes JSF and the fly likes JSF and CSS issues

A friendly place for programming greenhorns!

Big Moose Saloon

Search | Java FAQ | Recent Topics

Win a copy of The Mikado Method this week in the Agile and other Processes forum!

JavaRanch » Java Forums » Java » JSF

Author

JSF and CSS issues

Gregg Bolinger
Ranch Hand

Joined: Jul 11, 2001
Posts: 15230

I like...

Chrome

IntelliJ IDE

Mac OSX

posted

0

I've been working today on moving all style attributes into CSS styles. I am specifically having issues with tables and css. I have the following JSF page.

<style type="text/css">
.center-col
{
     text-align: center;
}
.menu-spacing
{
    width: 25%;
}
.menu
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    text-align: center;
}
.menu-table
{
    width: 50%;
    text-align: center;
}
</style>
 
<h:panelGrid columns="1" border="0" width="950" style="background-color: #000;" columnClasses="center-col">
    <h:graphicImage url="images/header3.png" width="480" height="80" />
    <h:panelGrid columns="4" styleClass="menu-table" cellpadding="0" cellspacing="2" border="1" columnClasses="menu-spacing">
        <h:outputLabel for="home" styleClass="menu" ><h:outputText id="home" value="Home" /></h:outputLabel>
        <h:outputLabel for="commissions" styleClass="menu" ><h:outputText id="commissions" value="Commissions" /></h:outputLabel>
        <h:outputLabel for="contact" styleClass="menu" ><h:outputText id="contact" value="Contact" /></h:outputLabel>
        <h:outputLabel for="artblog" styleClass="menu" ><h:outputText id="artblog" value="Artblog" /></h:outputLabel>
    </h:panelGrid>
</h:panelGrid>

This produces the following output

<style type="text/css">
    .center-col {
        text-align: center;
    }
 
    .menu-spacing {
        width: 25%;
    }
 
    .menu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #FFF;
        text-align: center;
    }
 
    .menu-table {
        width: 50%;
        text-align: center;
    }
</style>
<table border="0" width="950" style="background-color: #000;"><tbody><tr><td class="center-col"><img
        src="images/header3.png" height="80" width="480"/></td></tr>
    <tr><td class="center-col">
        <table border="1" cellpadding="0" cellspacing="2" class="menu-table"><tbody><tr><td class="menu-spacing"><label
                class="menu" for="header:home"><span id="header:home">Home</span></label></td><td><label class="menu"
                                                                                                         for="header:commissions">
            <span id="header:commissions">Commissions</span></label></td><td><label class="menu" for="header:contact">
            <span id="header:contact">Contact</span></label></td><td><label class="menu" for="header:artblog"><span
                id="header:artblog">Artblog</span></label></td></tr>
        </tbody></table>
    </td></tr>
</tbody></table>

If you notice the 2 TD tags from the outer parent table both have the correct class= value. But the inner table (menu) TD tags, only the first one has the value. The others are all left blank. Now, if I change:

to

I get the correct results. Anyone have any idea why this might be happening?

Naresh Chaurasia
Ranch Hand

Joined: May 18, 2005
Posts: 309

posted

0

Hi i have following jsp code

Login.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="com.equifax.cdc.util.messages" var="msg"/>
 
<html>
 <head>
    <title>Login.jsp</title>
    <link href="../css/styles.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
     <f:view>
      <h:form id="Login">
       <h2>
         <h:outputText value="#{msg.cdc_banner}"/>
       </h2>
 
       <p>
         <h:messages style="color: blue"/>
       </p>
 
       <p>         
         <h:outputText value="#{msg.userName}"/> : 
         <h:inputText value="#{loginBean.userName}" required="true">
         <v:commonsValidator type="required" arg="#{text['person.firstName']}"/>
         </h:inputText>
         <br>         
         <h:outputText value="#{msg.password}"/> : 
<h:inputSecret redisplay="false" value="#{loginBean.passWord}" />
 
 
         <br>
         <br>
         <br>
         
         <h:commandButton value="#{msg.login_button}" action="#{loginBean.validateUser}" styleClass="button_display" />
       </p>
       
      </h:form>
    </f:view>
 </body>
</html>

css code

when the Login.jsp loads for the first time, the back ground color is not changed as in style sheet. But if i hit submit the color changes.....

can some one pls tell what mistake i am doing......I am making use of Tomcat 5.x

SCJP 1.4, SCWCD1.4, OCA(1Z0-007)

Naresh Chaurasia
Ranch Hand

Joined: May 18, 2005
Posts: 309

posted

0

sorry greg, by mistake i posted that question

I agree. Here's the link: http://zeroturnaround.com/jrebel - it saves me about five hours per week

subject: JSF and CSS issues

Similar Threads
Horizontal scrollbar problem
Ajax status doesn't stop in IE8
Foreign key field population from datatable to textbox?
JSTL and bean data
HTML does not print properly - table width exceeding 100%?