# 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

paowang
140 6

If you manually switch IE8 to standard mode, will it render correctly?
Can you provide some reproducible code such as zul ?

cvarona
554 1 6

Hi,

my excuses for this late answer. I've been further researching into the subject and making sure what the real facts are.

If I switch IE8 to standard mode the page gets rendered correctly. If I activate the compatibility view it does not, even if I submit an http header telling ie what version should it apply. The same happens with IE9: if I enable the IE7 mode it will render it incorrectly, even if I apply a filter like this:

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

and the document.documentMode I obtain by executing Clients.evalJavaScript( "alert( document.documentMode );" ); turns out to be 9 (in other words: the browser correctly detects and interprets the X-UA-Compatible http header).

This is the zul code I'm testing

<window>
<listbox mold="paging" pageSize="5" rows="5" sizedByContent="false">
</listbox>
<separator />
<hlayout id="box">
<label id="label0" value="You can also select by typing"/>
<combobox autodrop="true" autocomplete="true" />
<button label="Remove"/>
<button label="Edit"/>
<button label="Show document mode" onClick='org.zkoss.zk.ui.util.Clients.evalJavaScript( "alert( document.documentMode );" );' />
</hlayout>
</window>

Please beware that when tested in the online zksandbox (which I guess is ZK6) the buttons at the bottom row also get rendered unaligned, although in a different way.

With kind regards

César Varona

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.

cvarona
554 1 6

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

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

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

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

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?

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

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?

[hide preview]