Search code examples
cssjsfrichfacesinternet-explorer-9

IE9 + RichFaces Rendering problem

I have a web app which runs on JSF 2.0 + Richfaces 3.3.3. Looks great on all browsers except IE9.

In IE9 without compatibility mode (With, no problem) it looks something like this (ignore blacked out text): enter image description here

Notice how all the components are framed and CSS is ignored (Not seen?)

The JSP looks like this (Only relevant stuff):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" href="css/pageStyle.css" type="text/css" >
</head>

<body>
...
</body>

The css is located at C:\apache\tomcat\webapps\MyWebApp\css\pageStyle.css

Anyone got any idea? Thanks!

UPDATE Did some research with 'developer tools' by capturing packets with the network tab. The css file is sent with Type=text/html instead of text/css. I guess that's the problem according to this question.

But I still don't know why this happens. As you can see, the file type is clearly marked as type="text/css in the <link> tag.

Another interesting observation - examining the same object in Chrome Developer Tools, the content-type is text/css so maybe its a IE9 bug. I'm confused...

Solution

  • RichFaces 3.x does not support IE9 (and there are no plans to introduce it), refer to this topic: http://community.jboss.org/thread/156720

    You can upgrade to RF 4,

    or implement a filter to force IE9 to run in compatibility mode:

    public void doFilter(final ServletRequest request, final ServletResponse response, final FilterChain chain) throws IOException, ServletException {
    HttpServletResponse resp = (HttpServletResponse) response;
    resp.addHeader("X-UA-Compatible", "IE=EmulateIE8");
    chain.doFilter(request, resp);
}