8 Replies Latest reply on Nov 21, 2010 12:06 PM by rajpatel84

    Richface 3.3.3 and Internet Explorer Skin Problems

    rajpatel84

      Hello,

       

      I have a project set up using Spring Framework 3.0.4, Spring Web Flow 2.2, Spring Security 3.0.3 and RichFaces 3.3.3.   I notice however that in Internet explorer 7 & 8, the standard HTML components for buttons and input fields are not skinning.  The same works correctly in Chrome and in Firefox.  I have control skinning enable in web.xml:

       

      <context-param>
          <param-name>org.richfaces.CONTROL_SKINNING</param-name>
          <param-value>enable</param-value>
      </context-param>

       

       

      I'm using the default skin.  Can't figure out why the skin is not rendering correctly for some components.  Any Ideas?

       

       

      Chrome (button and input field skinned):

      chrome.PNG

       

      Internet Explorer 8: (button and input field not skinned):

      ie.PNG

       

      Thanks!

        • 1. Re: Richface 3.3.3 and Internet Explorer Skin Problems
          ilya_shaikovsky

          please verify if you seeing the same there http://livedemo.exadel.com/richfaces-demo/richfaces/standardSkinning.jsf

           

          Also IE8 provides native DOM inspector which could be used to easilly check for the classes applied. Check maybe some conflicts with other classes?

          • 2. Re: Richface 3.3.3 and Internet Explorer Skin Problems
            rajpatel84

            Thanks for the reply.

             

            I tried your suggestion but it doesn't seem like any classes are missing or overwritten.  Funny thing is that on my login page which is unprotected, the RichFaces skin works just fine in IE.  But when I enter the secured area, it doesn't work in IE.  I'm not sure if this is related or not.  I didn't think so at first since it works in other browsers, but now I am not sure.

            • 3. Re: Richface 3.3.3 and Internet Explorer Skin Problems
              ilya_shaikovsky

              show your security configuration. seems that's closelly related.

              • 4. Re: Richface 3.3.3 and Internet Explorer Skin Problems
                rajpatel84
                <?xml version="1.0" encoding="UTF-8"?>
                <beans:beans xmlns="http://www.springframework.org/schema/security"
                       xmlns:beans="http://www.springframework.org/schema/beans"
                       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       
                       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
                                           http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-3.0.xsd">
                 
                    <global-method-security pre-post-annotations="enabled"/>
                    <http auto-config='true' use-expressions="true">
                 
                        <!-- Anonymous Pages-->
                        <intercept-url pattern="/login.htm" access="isAnonymous()" />
                 
                        <!-- Allow All Roles -->
                        <intercept-url pattern="/secure/**" access="hasAnyRole('ROLE_SUPERADMIN','ROLE_GC_ADMIN','ROLE_GC_PM','ROLE_SUB_ADMIN','ROLE_SUB_PM')" />
                 
                        <!-- Non Secured Pages -->
                        <intercept-url pattern="/resources/**" filters="none" />
                        <intercept-url pattern="/primefaces_resource/**" filters="none" />
                 
                        <!-- Login/Logout Configuration -->
                        <form-login login-page="/login.htm" default-target-url="/secure/home.htm" always-use-default-target="true" login-processing-url="/pd_login" authentication-failure-url="/login.htm?login_error=1" authentication-success-handler-ref="authenticationSuccessHandler"/>
                        <logout invalidate-session="true" logout-url="/pd_logout" logout-success-url="/login.htm?loggedout=true"/>
                    </http>
                 
                    <authentication-manager>
                        <authentication-provider user-service-ref='PDUserDetailsService'>
                            <password-encoder hash="md5"/>
                        </authentication-provider>
                    </authentication-manager>
                 
                    <beans:bean id="PDUserDetailsService" class="com.pdbuild.security.PDBuildUserDetailsService"/>
                    <beans:bean id="authenticationSuccessHandler" class="com.pdbuild.security.PDAuthenticationSuccessHandler"/>
                    
                </beans:beans>
                
                
                
                
                • 5. Re: Richface 3.3.3 and Internet Explorer Skin Problems
                  nbelaevski

                  Hi Raj,

                   

                  Please check whether there is missing DOCTYPE declaration on the page where skinning is not applied correctly. It is required because IEs don't understand CSS selectors that are used in standard skinning when it is running in quirks mode. If that's the cause of the problem, then you can use rich-* classes as a workaround.

                  • 6. Re: Richface 3.3.3 and Internet Explorer Skin Problems
                    rajpatel84

                    Thanks Nick.  Yes the DOCTYPE declaration is there for the pages in question.

                     

                    I just figured out what is causing the problem.  Pages that are derived from the facelets templates have problems in IE where certain components do not skin.

                     

                    These pages have problems:

                     

                    <?xml version="1.0" encoding="UTF-8"?>
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                                    xmlns:ui="http://java.sun.com/jsf/facelets"                
                                    xmlns:rich="http://richfaces.org/rich"
                                    xmlns:f="http://java.sun.com/jsf/core"
                                    xmlns:p="http://primefaces.prime.com.tr/ui"
                                    xmlns:h="http://java.sun.com/jsf/html"
                    template="../templates/defaultTwoColumn.xhtml">
                        
                    <!--//content-->
                     
                    </ui:composition>
                     
                    
                    

                     

                    But these pages are okay:

                     

                    <?xml version="1.0" encoding="UTF-8"?>
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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:a4j="http://richfaces.org/a4j"
                                    xmlns:rich="http://richfaces.org/rich"
                                    xmlns:p="http://primefaces.prime.com.tr/ui" >
                    
                         <head>
                            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
                        </head>
                    <body>
                    
                    
                    
                        <!--//content-->
                    </body>
                    </html>
                    

                     

                    Any workarounds?

                    • 7. Re: Richface 3.3.3 and Internet Explorer Skin Problems
                      nbelaevski

                      Please post the code of defaultTwoColumn.xhtml page.

                      • 8. Re: Richface 3.3.3 and Internet Explorer Skin Problems
                        rajpatel84

                        defaultTwoColumn.xhtml:

                         

                        <?xml version="1.0" encoding="UTF-8"?>
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                        <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                                        xmlns:ui="http://java.sun.com/jsf/facelets"
                                        template="../layouts/twoColumn.xhtml">
                            <ui:define name="header">
                                <ui:include src="../components/header.xhtml"/>       
                            </ui:define>
                            <ui:define name="nav">
                                <ui:include src="../components/menu.xhtml"/>
                            </ui:define>
                           
                            <ui:define name="content">       
                                content
                            </ui:define>
                            <ui:define name="footer">
                                <ui:include src="../components/footer.xhtml"/>
                            </ui:define>
                        </ui:composition>

                         

                        <?xml version="1.0" encoding="UTF-8"?>
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                        <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                                        xmlns:ui="http://java.sun.com/jsf/facelets"
                                        template="../layouts/twoColumn.xhtml">
                        
                            <ui:define name="header">
                                <ui:include src="../components/header.xhtml"/>        
                            </ui:define>
                        
                            <ui:define name="nav">
                                <ui:include src="../components/menu.xhtml"/>
                            </ui:define>
                            
                            <ui:define name="content">        
                                content
                            </ui:define>
                        
                            <ui:define name="footer">
                                <ui:include src="../components/footer.xhtml"/>
                            </ui:define>
                        
                        
                        </ui:composition>
                        
                         
                        

                         

                        twoColumn.xhtml

                         

                        <!--
                            Document   : twoColumn
                            Created on : Oct 20, 2010, 10:20:01 PM
                            Author     : Raj
                        -->
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                        <html xmlns="http://www.w3.org/1999/xhtml"
                              xmlns:ui="http://java.sun.com/jsf/facelets"
                              xmlns:rich="http://richfaces.org/rich"
                              xmlns:f="http://java.sun.com/jsf/core"
                              xmlns:p="http://primefaces.prime.com.tr/ui">
                        
                            <head>
                                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                                <link rel="stylesheet" type="text/css" href="#{request.contextPath}/public/css/default.css"/>
                                <link rel="stylesheet" type="text/css" href="#{request.contextPath}/public/css/layout_twoColumn.css"/>
                                <p:resources/>
                                
                                <ui:insert name="head">
                                </ui:insert>
                                <title><ui:insert name="page_title">Default Page Title</ui:insert></title>
                                <style type="text/css">
                        
                                .rich-panel {
                                    -moz-border-radius:1ex;
                                    -webkit-border-radius:1ex;
                                }
                                .rich-panel-header {
                                    -moz-border-radius-topright:1ex;
                                    -moz-border-radius-topleft:1ex;
                                    -webkit-border-top-right-radius:1ex;
                                    -webkit-border-top-left-radius:1ex;
                                }
                        
                                </style>
                            </head>
                        
                            <body>
                                <div id="wrapper">
                                    <div id="header">
                                        <ui:insert name="header"></ui:insert>
                                    </div>
                                    <div id="container">
                                        <div id="nav">
                                            <rich:panel style="height: 400px;min-height: 400px;">
                                                <f:facet name="header">
                                                    <div class="header_titles">Menu</div>
                                                </f:facet>
                                                <ui:insert name="nav"></ui:insert>
                                            </rich:panel>                    
                                        </div>
                        
                                        <div id="content">
                                            <rich:panel style="height: 400px;min-height: 400px;">
                                                <ui:insert name="content"></ui:insert>
                                            </rich:panel>
                                        </div>
                                    </div>
                                    <div id="footer">
                                        <rich:panel>
                                            <ui:insert name="footer"></ui:insert>
                                        </rich:panel>
                                    </div>
                                </div>
                            </body>
                        
                        </html>