3

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...

Community
  • 1
  • 1
Ben
  • 10,020
  • 21
  • 94
  • 157
  • Are there any errors in browser (js console, developer tools)? – Matt Handy May 12 '11 at 13:24
  • Thanks @Matt Handy. See the update in the question. – Ben May 12 '11 at 13:41
  • Can you check the MIME type on the server for .css files? I very much doubt that's the problem unless someones been fiddling about. Just for the record as well, the link tag should be self-closing since you have the xhtml doctype (same with the meta tag). I'd also try and play around seeing what works and what doesn't. Stuff like re-ordering attributes so that type comes before the href attribute. Who knows? Anything could happen. It's a weird enough bug already. – Matt May 12 '11 at 14:07
  • I'd consider updating to Richfaces 4 final and mojarra 2.1.1 (if you're using mojarra). I had issues with IE9 in previous versions of Richfaces/JSF but they seem to be resolved as of the newest versions. – Dave Maple May 12 '11 at 15:26
  • @Dave - Thanks. Since we are using JSP in the old projects the cost of migrating to xhtml is too big. – Ben May 12 '11 at 15:58
  • oops. should have read this before i posted lol. – Dave Maple May 12 '11 at 16:04

3 Answers3

3

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);
}
Andrey
  • 6,526
  • 3
  • 39
  • 58
2

Richfaces 3.3 predates IE9 being out of beta so it's likely that there will be some compatibility issues since the build probably wasn't tested vs. IE9.

The good news is that you're using JSF 2 so there is no reason you can't upgrade to Richfaces 4 Final which does definitely support IE9.

That being said the version of JSF you use seems to be important as well. I'm using mojarra and in version 2.0.4 I had issues with many Richfaces components when they were reloaded with mojarra.ab (f:ajax). Upgrading to 2.1.1 seems to have resolved all of these issues and now I have Richfaces code in production that is performing well for IE9 users.

I would recommend that you take a look at an upgrade path and see if it's viable.

Dave Maple
  • 8,102
  • 4
  • 45
  • 64
  • Thanks Dave. Although it doesn't directly solve me problem, it's very good to know :-) – Ben May 12 '11 at 19:34
2

The problem is that IE9 needs that http response for css file has the Content-Type header defined. Your http response headers should appears like this:

Content-Type: text/css

Possible solution: You can create a Servlet that captures http requests and decorates response headers with Content-Type values.

Sami
  • 8,168
  • 9
  • 66
  • 99
smxworld
  • 21
  • 1