# Zul incorrectly rendered when IE8 targets an application in the intranet zone

cvarona
554 1 6

Hi,

I'm developing an application on zk5.0.10 to be accessed from IE8 browsers. The application's address is configured as an intranet local site, and sites in the intranet are configured (this is necessary in order to guarantee legacy applications get displayed correctly) to be displayed in the compatibility mode.

I've tried to enforce the IE8 mode by applying a filter that establishes an X-UA-Compatible http header as IE=8. This way, when I load my zul page, I open the developer tools and see <body class="ie ie8" onbeforeunload="">; org.zkoss.zk.ui.util.Clients.evalJavaScript( "alert(document.documentMode);" ); also yields 8.

My zul does not get correctly rendered, however. Here's the difference:

It should be displayed like this:

Any suggestion?

delete retag edit

## 12 Replies

aznavour
26 3

Hello everyone,

here is a hack, that nails down zk to a fixed browser version. Add a listener that implements WebAppInit with:

@Override
public void init(WebApp wapp) throws Exception {
Servlets.setClientIdentifier(new ClientIdentifier() {

@Override
public ClientIdentifier matches(String userAgent) {
return this;
}

@Override
public double getVersion() {
return 10;
}

@Override
public String getName() {
return "ie";
}
});
}


Best would be to detect the IE version in the client, send that information to the server and keep this in the session / wherever it makes sense. By default, ZK uses the http header string, which does not work correctly for the given case.

cvarona
554 1 6

Hi,

I think you would need to detect the mode of the browser making the request at server side and generate the page accordingly. Whether this is actually possible or not, I'm afraid I cannot tell.

With kind regards

César Varona

aznavour
26 3

Sorry to bring this up again.

Our users will be updating to IE 10 and testing our applications it shows the same behavior. I added this to our application to force IE 10 mode.

< ?header name="X-UA-Compatible" value="IE=10" ?>

It's again the same, if the browser mode is switched manueally to "Standard", its all fine, if it's in the "Compatibility View", it's not working correct. The document mode is correctly on 10.

With further investigations, this is what I see:

• The DOM on the client shows this in the body tag
< body class="ie ie10 breeze">
• The version detected on the Server is IE 7, displaying the user agent that is recieved (and used to detect browser):
'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.2)

The browser gets the right one, but the server does not. Microsoft documents confirm that the browser mode defines the user agent string that is sent to the server.

My guess is, that maybe some code generated/executed for IE7 on the serverside but the client is showing it in IE10 mode. Which breaks the result.

Can anyone confirm or negate this?

Switching of "Display intranet site in Compatibility View" is not an option as we've a hughe amount of intranet applications, each with its own requirement. So this is simply not possible.

If my assumption is correct, we'd need a detection of the document mode and communicating that to the server as the browser version - so both parts are on the same version.

Any help?

cvarona
554 1 6

To the best of my knowledge it's not possible to enforce your document mode over the intranet policy. As mentioned above, the solution we applied was to fully rewrite the zk css into a new theme which would make the widgets get rendered ok in IE8.

aznavour
26 3

Could anyone confirm, that there is no solution to this problem?

We also face the problem, that we have IE8 and our ZK app runs on the intranet. The problems looks exactly the same as in the screenshot of the thread opener, the calendar/dropdown icons are not aligned correctly.

What do we have to do, get the correct rendering with ZK 6.5 on IE8 on the Intranet? Letting the user change the Browser Mode manually is not an option.

Anyone an idea?

stream
81 3

I have also found interesting description of this issue at stackoverflow. It can be interesting.
http://stackoverflow.com/questions/2742853/force-internet-explorer-8-browser-mode-in-intranet
I also consider a group policy as one of the options to achieve desirable result.

--
Thanks,
Eugene

cvarona
554 1 6

Hi,

as long as it does not contravene your environment's policy your solution is alright. In our case we had no choice but to thoroughly modify the zk theme's css so that our application gets rendered ok on IE working in compatibility mode (and disastrously everywhere else).

With kind regards

César Varona

stream
81 3

Cvarona, did you resolve this issue? I am experiencing the same problem. IE in Standard mode (when compatibility view is disabled) renders the page correctly. As soon as compatibility view is enabled and no matter what value in 'X-UA-Compatible' (EmulateIE7,EmulateIE8,EmulateIE9,IE7,IE8,IE9, edge), the page is rendered not properly.
scenario 1:
1) IE. Uncheck all checkboxes in Compatibility View settings. This way all pages are going to be rendered in Standard mode
2) open the page in IE
As result the page is rendered properly

scenario 2:
1) IE. Check all checkboxes in Compatibility View settings. This way all pages are going to be rendered in EmulateIE7 mode.
2) Add <?meta http-equiv="X-UA-Compatible" content="IE=edge"?> to the zul file. It tells IE to render the page by using the latest IE version.
3) open the page in IE
Expected result: because of the latest document mode, It is expected that the page is rendered properly
Actual result: the page is not rendered properly.

Conclusion: Standard mode is different from EmulateIE8 (in IE 8) or EmulateIE9 (in IE 9)

How to overcome it? Right now I should instruct users to disable compatibility mode for intranet sites in IE settings (it is set by default in IE) to make sure that the application looks fine.
I didn't find the way to render the page in Standard mode.

cvarona
554 1 6

Yes, that's what exactly happens in our IE8 browsers enforced as IE7.

paowang
140 6

I only have IE9 and try your code with ZK 5.0.10 and breeze theme on Windows 7.

IE9 at standard mode. I click the "Show document mode" button and show "9".

IE9 but switch to IE7 mode manually. It show "7" at this time.

IE9 with filter (IE=edge). It show "9" and can't switch mode anymore.

so far, it looks fine.
But, if I switch ie9 to ie7 mode at this page first, then apply filter on the same page and reload.
It will be weird as you described.

[hide preview]