We have deployed our webapp, which was developed with JSF, Spring and Hibernate on Tomcat server in our internal network (intranet). When I test in my application in local it's working fine.
But once I deploy to DEV I come across style issues. When I have two dropdowns one after another, the top dropdown overlaps with another one.
This happens when I have Document Mode set to "IE7 standards." When I change Document Mode to "IE8 standards," everything works fine.
To force Document Mode to IE8 standards, I tried this meta tag in my section of the HTML document according to this link, but it didn't work for me:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
How can I force my page to render according to IE8 standards on the intranet? Does my application render in IE8 standards on the internet?
EDIT :I see something in my develoer tools.Even though I kept my <meta> it after <head> but my primefaces styles and scripts are loading before to that.How can I resolve this?
Odd, this item was posted yesterday, not sure if it applies to your situation:
IE 8 will ignore the x-ua-compatible setting if it comes after the stylesheets. In order for IE to acknowledge the meta setting, put it at the top.
I am glad to tell I am finally able to resolve this issue by using this link in primefaces.And this post also helped to do it through entire application
http://blog.primefaces.org/?p=1433
Related
I have a main application, made with Microsoft .NET Framework 4.7 (MVC) that is forced (and must) to run with Compatibility Mode IE11.
Inside that application, there is a specific page with a iFrame that run a .Net Framework 1.1 application that must run in Compatibility Mode IE7.
The problem is that both (main and iframe) are running with compatibility mode IE11 and, because of that, frame application doesn't run properly.
At the moment, I've already tried to force iframe application to run in IE7 by adding to the IIS HTTP Headers the following pair key-value:
Custom header name: 'X-UA-Compatible'
Custom header valuebox: 'IE=EmulateIE7'
However it didn't solve my problem and i am out of ideas now.
Any suggestion?
Thank you in advance!
I think you should you meta tags to specify the compatibility mode (not sure if the http header do the same thing). According to this answer it should be posible:
Main web page in standard mode, iframe in compatibility mode: any issues?
Here is quite thorough documentation of what are the options:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
Please check this similar thread, try to use the IE browser Quirks Mode.
In the iframe content page, omit Doctype and add
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
I copied the navbar default sample from from the samples but without any changes it appears to be doing what I think is mobile format. The only thing I see is the brand tag to the left and the button to the right. My monitor is pretty big so it can handle the menu and it does when I view it online which you can visually see here. I can only assume that since I cut and paste from the demo code I have a setting somewhere else that is wrong but I have no idea where to look. I did make sure to run nuget and get the latest version of the code so I should match what is on the demo. Any ideas?
Update
The issue appears to be with VS2012 and debug mode. Using Visual Studio Development Server seems to be the problem. If I publish locally it works as expected. I thought it might be IE8 but realized it was VS2012 after I published the site.
Is there a way to work around this while using the debugger in VS2012?
Update 2
And somehow it is not working in IE8 again even after being published. Chrome seems to work fine. Must be something picky about IE8 that I need to code around.
Try to copy all the page html, then if it works cut unnecessary code.
Use this instead of your local bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Looks like this was an issue with IE8 all along. I didn't think it was a browser issue so I never looked for IE8 nav problems but here is a link that documents the issue.
I have an MVC development which works fine when run locally. When deployed to an Azure Web Site, I'm seeing the same results (as expected) in Firefox, Chrome, IE8, and others. When viewed in IE11 (the same browser that I'm using to view the site locally), the layout is all over the place.
It seems that when Azure Web Sites renders the site, the IE11 browser is dropping into "7 (Default)" Document Mode. Pressing F12 and resetting to Edge gets the rendering back to how it should be.
I'm struggling to work out what is going on in Azure Web Sites that is causing this behaviour. I'm thinking it's a compatibility setting somewhere and any pointers would be appreciated.
Thanks, Nick.
As explained by #ahmelsayed above, adding the
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
tag has fixed the problem. Thanks for the support.
When I tested a new asp.net MVC app I created on another machine the layout was incorrect and seemed strange in IE9. When looking at Developer Tools the Mode/Standards were set to older versions and even Compatibility Mode. I changed this back to IE9 and was ok again.
But then when I reopened the site it had set these values back again, is there some default for these that keep overriding or is my app for some reason causing these values to change to older versions?
There is some mechanism, which IE browser family uses to guess what rendering mode would be the best. There is more reading about this topic:
X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode
So there is a way how to say, which IE version you are targeting. Put this html tag as the first (really the first) in the <head> element after the <title>
<!DOCTYPE html>
<html>
<head>
<title>My Web</title>
<meta http-equiv="X-UA-Compatible" content="IE=100" >
...
content should be contain="IE=8" if you are targeting IE 8.0, IE=100 will work for IE 9.0++.
I've read that this behavior won't work on intranet, but my experinece
is different. The point is that that <meta> element MUST be the first!
The first means, no comment before. Nothing just the first one after the title.
For example, I do some investigation on the server side in code to check what version it is, and put the meta related to the browser - as the first element
As an extra note, it's possible to save compatibility overrides to your local browser when testing.
From (http://answers.microsoft.com/en-us/ie/forum/ie9-windows_7/ie9-always-rendering-pages-in-ie7-compatibility/c0177b44-3950-e011-8dfc-68b599b31bf5):
Step 1: Let’s turn off compatibility view and check.
a. Open internet explorer.
b. Click on Alt key on the keyboard. Now click on Tools in menu
bar.
c. Select Compatibility View Settings.
d. Remove the check mark for Display all websites in Compatibility
View and close the Compatibility View Settings window.
Step 2: Reset internet explorer settings and check.
Refer: http://support.microsoft.com/kb/923737 (This article may also
be used for internet explorer 9)
I've created a website that displays correctly in all browsers including IE8 when viewed from my local server i.e. http://localhost
However when I view the website from another machine, http://pc5008 for example, IE8 goes into what seems like compatibility mode and looks terrible.
Extra Info
When viewed from the localhost IE8 gives an option to view in compatibility mode. If I choose this option it looks the same as when viewed on the non-localhost i.e. terrible.
When viewed on the non-localhost IE8 doesn't show the option to view in compatibility mode. (compatibility mode under Tools is greyed out)
Also, everything validates as XHTML 1.0 Strict.
I'm not very familiar with the subject, however as I know IE chooses it's mode (standard/quirks-mode) based on doctype declaration. Check if your doctype is correct.
Maybe this article will help: Activating Browser Modes with Doctype.
If the problem is eventually with doctype, try declaring it html5 style:
<!DOCTYPE html>
In turns out that IE8 has an option under Tools\Compatibility View Settings\ called 'Display intranet sites in Compatibility View'. Disabling this feature fixes my problem.
Another solution is to add the following line to the head:
<meta http-equiv="x-ua-compatible" content="IE=8">
This overrides the setting.