The site I am working on uses Facebook Javascript SDK, as described here https://developers.facebook.com/docs/reference/javascript/, to allow users to login. The site is an ASP.NET MVC site.
It works on latest versions of Chrome, Firefox, Safari and also IE9.
However in windows 8 consumer preview using IE10 (in normal and compatibility mode) when logging into Facebook the popup window goes white and doesn't close. If close manually and refresh the original page I see that I am logged in.
I have looked through all other SO questions and searched the web. I have tried all the solutions and none of them work.
I am using the channelUrl correctly and it works in the other browsers. I also tried the IE10 bug fix here http://www.hanselman.com/blog/BugAndFixASPNETFailsToDetectIE10CausingDoPostBackIsUndefinedJavaScriptErrorOrMaintainFF5ScrollbarPosition.aspx
There really isn't much different from my code and the Facebook examples. So I think there is either a problem with IE10 or the Facebook API when using IE10.
Has anyone had similar problems and found a solution?
The problem was in the HTML. The meta tag for http-equiv was set to
<meta http-equiv="X-UA-Compatible" value="IE=8">
This causes IE10 to display the web page in IE8 mode. Changed this to 9 as it was meant to be and the Facebook popup box disapears.
Related
We're experiencing an issue with our site, YouSIMUL8.com. We use this site to allow people to run simulations on the web. An example simulation can be found at http://www.yousimul8.com/watch.php?x=4d5005d769d31.
If you have a look at what's going with this page, when you press play it loads an iframe in and the simulation is shown there.
I've been speaking to a customer who has been having difficulty using the site. When they open a simulation, only the border of the iframe is shown and nothing else happens. This is using IE10. The problem disappears when compatibility view is turned on.
I cannot replicate this issue with IE10 no matter how hard I try. The customer's IT is outsourced so they cannot access the settings, developer tools or console in IE.
So the question is this: What configuration of the client's machines could cause this behavior?
To force to the rendering of the page to latest version of IE, overriding the automatic compatibility view, try to use the Meta Tag Compatibility View:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Have a look to this StackOverflow post.
I have an ASP.net website that was working fine with IE9, Mozilla, chrome but with IE 10 users have lot issues. The UI and even the functionality (like clicking on button, login/logout do not work) doesn't work well with IE10.
The IE version I have is 10.0.9200.16519.
I see few differences between the view source from IE10 and google-chrome (or even IE9) but can't understand much of it.
Where actually in the site can I check why pages sent to IE 10 browser is different from others browser or IE9?
Please suggest how can I debug further?
PS: The site works fine with IE9 and below versions of IE.
ASP.NET fails to identify IE10's user-agent string, and as a result can send back broken code. This has been discussed in various places, but probably most notably on Scott Hanselman's blog. See the post titled Bug and Fix: ASP.NET fails to detect IE10 causing _doPostBack is undefined JavaScript error or maintain FF5 scrollbar position.
check if there is any js error, use IE developer toolbar (F12) to debug script
I am looking for a fix for styling a webpage that so that a webpage on google chrome, will look the same as it does on firefox, meaning, is there some syntax in css to make all of the web browsers look the same. does this exist (I would also like one for I.E., and any other web browser if it exists if it exists)
Google Chrome uses a different rendering engine than Internet Explorer/Firefox, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.
If your site isn't rendering properly in any browser, make sure your HTML and CSS are valid by testing them at http://validator.w3.org/.
If your site doesn't render properly in Google Chrome or Apple Safari, file a bug at webkit.org as described at http://webkit.org/quality/reporting.html.
If your site renders properly in Apple Safari but not in Google Chrome, please file a bug against Google Chrome at http://code.google.com/p/chromium/issues/list.
How can I test my website in Google Chrome?
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
I found the Answer. Being that I am using drupal, there is a built in IE fix for the theme that I am using (fusion) that creates separate css files (ie7.css, ie8.css, etc). using these, I can adjust what I need for IE specifically.
Most layout problems with decent browsers are cause by invalid HTML, invalid CSS, or misunderstanding what a particular piece of CSS is actually supposed to do.
In general, when I see a difference between FF and Chrome, it is because Chrome is doing the proper thing and FF just happens to be rendering some invalid CSS fine. 99% of the time, I can fix the CSS and get FF and Chrome to render the same.
The remaining times, I typically browser sniff and use jQuery to fix the problem.
I have a map with points on it which the user hovers over to reveal further information.
The problem I have is hard to explain because it only seems to be a problem when the user views the page in IE and when it is hosted on my server. Exactly the same code on the jsfiddle page below works fine.
http://jsfiddle.net/FbYEW/
What happens when hosted on my server is the z-indexes on the popups do not work and the popups appear underneath the other spots. Can anyone think why this might be... it's very frustrating not to be able to replicate the problem for anyone to see.
EDIT:
I was viewing the page hosted on my server in compatibility mode on IE8. If you look at the jsfiddle page in IE the same problem occurs - so nothing to do with my server after all... oops
When hosted from your server, the page is rendering in a browser mode other than IE9 Standards Mode.
For example, if it's rendering in IE7 Mode or Quirks Mode, z-index problems are expected.
Hit F12 to bring up the Developer Tools, and see which it is.
There are many different possibilities as to why this is happening, see:
http://hsivonen.iki.fi/doctype/#ie8modes
If you just want to fix it without working out where the problem is coming from:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I am completely confused - I have a website that renders perfectly in IE8 when run through Cassini (in Visual Studio) but has several messed up elements (style/look) when deployed to localhost and viewed through the same browser (IE8).
I have run Beyond Compare 3 on the html and CSS files and they are exactly the same. Are there any circumstances where IIS7 could be somehow sending extra/different information to the browser? Has anyone run across something like this before?
Note that Chrome and Firefox both render the same webpage just fine through Cassini and IIS7.
(Update)
What Browser Mode and Document Mode does IE8 Developer Tools think you are in if you press F12?
When running from Cassini (http://localhost:22120), IE8 stays in IE8 mode (with the option for turning on IE7 compatibility view) and everything looks great.
When running from IIS7 (http://{machine name}), IE8 automatically goes into in IE8 Compat View, IE7 standards and things look horrible.
My assumption (as mentioned in my comment earlier) was that IE is working in a different rendering mode, depending on whether you are using IIS or Cassini, and this is causing the layout differences. It actually appears to be IE that is causing this, based on the settings found in Tools | Compatibility View Settings. There are two check boxes:
Display intranet sites in Compatibility View - this is checked by default.
Display all websites in Compatibility View - this is not.
Either way, you should use the standard meta tag to force the mode you wish to be rendered in.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Hope this helps.
I think the best solution I have found is not far from Paul's one but it tells the browser to use your Internet Explorer version which solved other problems I have with content="IE=8".
Here it is:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Actually I had the same issue. IE8 has a compatability settings dialog under tools menu. There is a check box which indicates "Display intranet sites in compatability mode".
And not that IE7 compatability mode is not the same as using ie7, there are some differences.
One side note to this issue:
if the same page renders differently on different servers but in the same IE8 browser, check your url - IE8 automatically displays in compatibility mode if the domain is not fully qualified.
If the page content is the same then compare the headers that the servers are sending with the page.
After kicking this around a bit I though about compatibility mode. Try manually forcing IE8 to render the page in compatibility mod. If the render doesn't change then you know that the issue is because IE is rendering that page in compatibility mode when reading it from that web server.
If the latter is the case look into http://msdn.microsoft.com/en-us/library/dd567845%28VS.85%29.aspx