Internal stylesheet not working in IE9 with jsf

Question

I am using jsf2.0 with primefaces.My application was working fine with all browsers includes IE8... but when i run my application in IE9 my internal stylesheet not even taken by browser(IE9).. The styles are broken.

my css on head:

<h:head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Chennai Volunteers</title>
<link href="cv_website_styles.css" rel="stylesheet"  type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</h:head>

and i am getting the follwing error in my console,

java.lang.IllegalArgumentException: ContentTypeList does not contain a supported content type: text/css
at org.apache.myfaces.shared_impl.renderkit.html.HtmlRendererUtils.selectContentType(HtmlRendererUtils.java:1905)
at org.apache.myfaces.renderkit.html.HtmlRenderKitImpl.createResponseWriter(HtmlRenderKitImpl.java:223)
at org.apache.myfaces.shared_impl.view.JspViewDeclarationLanguageBase.renderView(JspViewDeclarationLanguageBase.java:154)
at org.apache.myfaces.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:263)
at org.apache.myfaces.lifecycle.RenderResponseExecutor.execute(RenderResponseExecutor.java:85)
at org.apache.myfaces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:239)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:191)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:304)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.primefaces.webapp.filter.FileUploadFilter.doFilter(FileUploadFilter.java:79)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:224)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:185)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:151)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:100)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:929)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:405)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:269)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:515)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:300)
at java.util.concurrent.ThreadPoolExecutor$Worker.runTask(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at java.lang.Thread.run(Unknown Source)

thanks in advance.

Answer 1

I checked your website chennaivolunteers.org and I noticed that FacesServlet is been mapped on an URL pattern of /faces/* instead of *.xhtml. As you're using only relative <link> and <script> resource references, they will (unnecessarily) go through the FacesServlet as well.

IE9 sends for CSS files a Accept-Header of text/css while other browsers sends a Accept-Header of text/css;*/*. The FacesServlet itself is not supposed to respond on text/css requests.

There are basically 2 ways to fix this:

• Get rid of the /faces/* mapping and replace it by *.xhtml.

  <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  

• Use domain-relative URLs in <link> and <script> (and <img>) references so that they never go through the /faces path.

  <ui:param name="root" value="#{request.contextPath}/" />
  <link href="#{root}cv_website_styles.css" rel="stylesheet"  type="text/css" />
  <link rel="stylesheet" type="text/css" href="#{root}css/style.css"/>
  <script type="text/javascript" src="#{root}js/jquery.min.js"></script>
  <script type="text/javascript" src="#{root}js/script.js"></script>
  

  Or use the <base> tag, or use <h:outputStylesheet> and <h:outputScript> with a name instead.

Your site has by the way quite some 404's on several resources. Fix that as well. Check the "Net", "Network" section of the browser's builtin web developer toolset (press F12 in IE9/Chrome/Firebug).