I was having issues because of Chrome automatically referencing DIV... It works that way in Safari (desktop and mobile), but not in Firefox.
See image:
See Fiddle (open in Chrome, then in Firefox):
http://jsfiddle.net/stefek99/Sqcff/
The question is - how to disable this feature? I would really like to develop in "strict" mode without any Google quirks, just to make sure my code is cross-browser compliant.
This is a known 'problem', however I have not been able to find a reliable method of disabling this. One might think that "use strict"; should probably disable it but that doesn't seem to be the case.
In any case, some more explanation on it; Do DOM tree elements with ids become global variables? As explained there it will probably be standardized in HTML5. It all started out as a non-standard IE feature, which ofcourse got mimicked in other browsers. Theres even a msdn blog post noting it as a 'problem' so it seems a bit silly the HTML5 working group is trying to standardize it now.
I would like to note to anybody to please not rely on this problem feature as it is very ambiguous and hard to debug for programmers who don't know of it.
Related
Our application is running fine in chrome browser. But in Firefox some features and screens are not working properly. So it needs to be fixed .How can i do that and what could be the solution for that?
The best way to find out what is 'going on' is to debug the code in the browser.
Firefox has a built in debugger but i prefer to use a third party debugger called Firebug.
You should give Firebug a try as indicated in the first answer. However as far as I know you had to install it as Add-on, it is not included in the distribution.
I think your question is a little too general. Anyway, if the compatibility issue is about CSS style, you should check whether you are using WebKit-prefixed CSS only. For example, if you are using -webkit-animation, it would only work in Chrome and Safari. Actually you should set four CSS styles: -webkit-animation, -moz-animation, -o-animation and animation to make your code work in major browsers. There are some documents about Mozilla and WebKit CSS that might help:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
I found this completely wonderful document that shows the information I want, but for IE9. This helped clear up a lot of confusion I had about how IE document modes work:
http://ie.microsoft.com/testdrive/ieblog/2010/Jun/16_IEsCompatibilityFeaturesforSiteDevelopers_1.svg
I've searched for an updated version for IE10 but haven't found anything. Anyone seen the equivalent but updated?
My experience so far with msdn's documentation such as their Defining document compatibility has been very frustrating, with a lot of going in circles and undefined terms.
Particularly, the question I've been unable to answer (though really I'm only looking for the answer still because I'm frustrated that it's not provided anywhere) is this: Does IE10 Compatibility Mode still mean it's emulating IE7? I guess I assume that it does, but it annoys me immensely that nothing seems to say so explicitly. Mad props to anyone who can find someplace that the MSDN documents say whether it does or not.
I was also looking for an updated diagram, and found the following after doing a Google image search (scroll to bottom):
http://msdn.microsoft.com/en-us/library/ff955275(v=vs.85).aspx
There are links on the left to take you to the compatibility view settings and doctype table, as they're not included in the flow chart on the page.
For your second question, about whether Compatibility Mode is still emulating IE7, I assume you mean that you get to IE10 Compatibility Mode by clicking the icon in the browser and not by setting a meta tag or header. I believe the answer is yes, but not because I have seen it in Microsoft's documentation. When I click that icon and look in Developer Tools, I see that the Browser Mode is "IE10 Compatibility" and the Document Mode is "IE7 Standards" so it seems like that's the default. You can see this happen on nytimes.com.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
I've had to work on a fairly complex design ( http://scoding.com/eyal/ ) because of its layout and shape, finally done it, all happy - until I checked on IE, it's seriously messed up, but why is that? Why is the container not centered? I have looked on google for some answers, and didn't find anything that could help, ANY HELP would be appreciated!
IE is rendering the page in 'quirks mode' (if you press F12 in IE you'll see the 'document mode' defaults to quirks).
Set a doctype like:
<!doctype html>
And all will be well!
For bonus points, run it through the W3C Validator and fix the errors it flags!
This is one of the reasons that every web designer hates IE.. ;-)
Unfortunately, there is no magic answer for you. You have to get the right tools and test every browser you want to support and fix the CSS for every broswer.
Not all browsers interpret CSS in the same way. But IE is the one most people will have problems with.
Hints:
Try using a CSS framework. Blueprint or CSS960 are among the most popular IMO. With a framework, you have a better chance of having the same result in every browser.
For IE, you can download the developer toolbar. It's like Firefox's Firebug but for IE. It is essential to debug CSS problems in IE.
Take note that if you want to support IE6,7,8 you will have to test them all :-( Because you will probably have different results in each version.
If you use JavaScript, I highly recommend jQuery. Never write "native" JavaScript code since it is interpreted differently in each browser. jQuery takes care of that and ensures that your code will be cross-browser compatible.
Good luck
I meet a problem that my page works well in firefox and chrome(almost the same look and feel) but very bad in IE. It's time consuming to adjust the differences. Is there any research has been done already to tell the differenceS, or any automation tool to examine the uncompatibilities?
BTW: which tool you guys are using when debugging in IE(like firebug for IE)?
Your best starting point is to always use some kind of "reset mechanism" like Eric Meyer's CSS Reset or framework like HTML5 Boilerplate, they help in reducing differences between browsers (not all, but most of it). If this is not possible (project is already in finishing phase, etc.) you can always ask questions here, check Position Is Everything for description of bugs, Quirks Mode, SitePoint reference and various other sites (Google is your friend :)). Hope this helps.
There is "debugging" tool for IE - IE Developer Toolbar - but it's usefulness can't compare to that of Firebug, Dragonfly and such. IE8+ does have better support for debugging, though… There are some articles that suggest using Visual Studio, but I haven't tried it. Mostly it's just trial and error with IE :).
ie7-js is a JavaScript file that automatically fixes many Internet Explorer bugs for all versions. Works like magic.
For fast and better results in IE you can use CSS Hacks for adjusting the HTML elements.
For IE we have IE Developer AddOn
you can download it here : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Welcome to the tiresome world of IE.
IE8 has some version of developers tools, hit F12 on your keyboard and it will pop up. (not present in 6&7)
There are many documented bugs in IE, a simple Google Search would help you out better, but a lot cannot be accounted for until you have your site working in FF.
What most developers I know do is to make the site in FF, make small changes for Webkit browsers then go over to IE (not including 6) and debug.
In my experience there really is no way to tell what IE is going to mess up next, so you'll probably just have to deal with it as it happens.