I'm developing a web application that uses lots of Javascript and CSS, both of my own creation and through third-party libraries. These include jQuery and Google Maps & Visualization JS APIs.
I've been testing everything in Firefox 3. Things are peachy until it turns out the main target of this webapp is (cue sad trombone) IE7. I'm looking for caveats, advice, libraries, or other references to help make this transition as easy as possible (not that it's actually going to be easy).
I've already tried IE7.js though it hasn't yet shown itself to be the silver bullet I was hoping for. I'm sure that it works as advertised, I think it's just not as all-encompassing as I'd like (example: colors like #4684EE and #DC3912, which are correctly rendered in FF3, are rendered as black in IE7, with or without IE7.js). Are there other libraries out there to help bring IE7 (more) in line with FF3?
A corollary question: what debugger would you recommend for IE7? I'm currently using Firebug Lite, but it runs painfully slowly. Is there anything out there with similar features that I might have missed?
As far as libraries go, jQuery is compatible across all major browsers, so at least you've got that going for you. Without knowing exactly which plugins/modules/libraries you're using, I can't recommend alternatives that are cross-browser compatible.
You could take a look at the Internet Explorer Developer Toolbar. It isn't nearly as good as Firebug, but it's better than nothing.
Get the IETab add-on for Firefox so that you can fire up IE right inside the same tab you test Firefox in. Get the FULL version of Firebug. It will be perfect for you to deal with HTML, CSS, and scripting. HTMLValidator for validating your HTML and CSS. The Web Developer toolbar is a MUST if you don't have it. I can't even go into a fraction of the benefits it has, from images to source viewing to validating scripts it has a lot.
I use a separate stylesheet for IE7. It doesn't have many changes from the original stylesheet, but enough to make viewing in IE7 close to FF. I try not to do ANYTHING for IE6. In fact I encourage the "downfall" of IE6. It's almost ten years old, and full of bugs, and unsupported now!
Unfortunately, Microsoft doesn't really want to be on the same page as the W3C and developers that want web standards so that you don't have deal with what you're going through right now. Regardless of what they SAY, they're still "competing" against the other browsers for control, and it's hurting the developers.
Writing cross browser code is a big topic - you can't really generalize it into "don't float left and padding-left" statements and be done.
Separate stylesheets for ie are messy and not needed IMO.
Generally speaking, firefox fixes broken code in a good bit of cases, so there is a chance that at least some of your stuff looks bad in IE because of open tags that firefox is fixing for you.
Re-slicing a site that's already done might be your easiest way. You should be able to completely redo the CSS from scratch in a few hours tops.
But all this is advice that may not apply - it would be easier to see the code you're talking about.
Related
I am trying to validate the JavaScript on my website. The scripts do not throw any errors and run fine on Chrome and Firefox (latest stable version). However, the animated parts absolutely do not work on IE (9)[*1][*solved]. I have used jQuery and jQueryUI for the animation and had hoped that it would be cross browser compatible.
Usually I would not have cared abut IE users, but liked the idea of folks at anybrowser.org and thought of sticking to a standard instead of using the lowest common denominator and leave the graceful degradation to the browsers / JS engines. My page is HTML5 compliant according to the w3c validator and I wanted to do the same with JavaScript, but could not find an acceptable way to do it.
Why JSLint did not work -
It will not take the page and check it like w3c validator.
So there is no way to check jQuery referenced script. (There are a few SO posts on this).
I did find an ECMA-264 test page that would check the browser, but not my JavaScript.
The question after all the preamble is: How do I validate the Javascript on my webpage? Is there an authoritative validator for JavaScript?
*1 Added: The minification has nothing to do with the script not working on IE9. Even the unminified version does not work.
*Solved: The problem with the specific page was solved by this comment.
This started as "What is Javascript?" got closed here and migrated to Programmers. Thanks to YannisRizos for helping me to split the original question to something that was acceptable between Programmers and SO.
A test suite. No really.
If you want to ensure your javascript runs perfectly in every target environment, then you write a test suite for your code and make sure it passes in all your target environments.
A test suite helps find where your code breaks when run on different platforms. And therefore helps you fix it.
But assuming you want something that is less work, http://www.jshint.com/ is your best bet.
Or http://www.jslint.com/ if you like getting yelled at.
But honestly, no validator will ever be able to ensure that your code runs without error and exactly how you expect everywhere. Simply because your code follows best practices correctly, that doesn't mean it will work in an old version of IE.
Standards evolve, but an old browser that never updates get stuck with whatever standard was out at the time that the browser maker may or may not have even implemented successfully or accurately.
Testing, automated or manual, is the only way to ensure things work universally.
I am working on a project to convert a web site that is fully functional in Internet Explorer 8 and lower, but does not work well in Firefox or Safari.
A lot of what will need to be changed is going to be javascript-related (aka methods that exist in IE but not in other browsers).
What I want to know is whether anyone is aware of a fairly comprehensive list of common things that have to be changed to work accross all browsers.
I am starting with quirksmode.org but I don't think it will have quite everything I'm looking for. If anyone knows of a list please let me know.
Your best option here is to go with a Javascript toolkit/library like jQuery, MooTools or Prototype. Such a decision will save you a monstrous amount of work, and all three are constantly being updated which gives you a large degree of safety against future compatibility issues. Especially for DOM manipulation or AJAX, a library is the way to go.
If you absolutely mustn't use one, quirksmode is a good start. I've never found any single source that is comprehensive enough to keep me from running back to Google for each problem area.
Quite honestly, if you don't have lots of experience doing cross-browser development, I suspect the best way to fix your app is to set up a good test environment on each target browser and starting finding where it breaks. You're eventually going to have to test it on each target browser anyway, so you might as well start there. Once you find out what code is failing you for a particular bug, you can do more targeted searches for how to work around that issue in a cross browser way.
You will, over time, build up a good internal knowledge base of what is safe to use in a cross browser way and what is not. Even experienced developers still run into new issues on every project that are only found with testing. One advantage of experience though is that you start to learn when to suspect that something might or might not have cross browser issues and either avoid it (find a safer way) or explicitly test it in several browsers before you use it.
I find that http://jsfiddle.net is awesome for creating very efficient self-contained test cases to either proactively try something in other browsers or to troubleshoot something that's been giving you a problem.
As others have said, one huge advantage of the various browser libraries like jQuery or others is that they have solved a lot of these compatibility issues for you and, in general, if they document a function in the library and don't explicitly warn you about cross-browser issues, then they've already done their homework to make it safe for you.
You may also find out that using a javascript framework such as jQuery, ExtJs, Prototype, Mootols, ... would be very beneficial in writing cross browser javascript.
a web site that is fully functional in Internet Explorer 8 and lower,
but does not work well in Firefox or Safari
I would strongly recommend to develop with a browser that meets the standards (e.g. CSS3).
The process should rather be: to develop with FireFox or Chrome - and fix all IE versions later on.
Well, this is my daily bread... and ordinary it's IE b*tch which makes me loose time...
have a look at my site : http://www.searchr.us.
Its loading fine with all the effects in FF and Chrome but not in IE ..Whats the problem ?
You can also have a look at my CSS : http://www.searchr.us/css/style.css
Please tell me what the problem is.
Thanks
You have no Doctype, therefore you are entering Quirks mode in which browsers treat the code as "Rubbish from beyond the dawn of standards" and engage in deliberate misinterpretation of the specifications. IE deviates from the standard the most (going quite a long way towards emulating IE 5.x).
1) declare your doctype
2) Reset styles helps a lot for x-browser stuff. (although if you already have your styles laid out it would probably be more of a headache than it's worth)
3) Isolate any functionality that is breaking in IE in an effort to debug any IE specific JS that is not supported. Also, I just found out NetBeans has AMAZING support for JS. You can even test browser compatibility on a line-by-line basis.
Also, your question would be more answerable if you provided more specific details and did a little bit of debugging in an effort to isolate your problem. X-browser (ex: coding for every other browser... than IE) is painful enough.
IE is not the best browser when it comes to implementing standards. What you're experiencing is the something that probably causes a lot of premature balding in web development.
I have just taken over maintenance of a large web application which is over 10,000 lines of Javascript.
At the moment it runs on Firefox 3.5+, Safari 4+ and Chrome and I have to make it work with IE8.
I am a very experienced programmer but I only have a little Javascript experience - although I have been introduced to the dubious pleasure of quirksmode and I have a copy of Javascript The Good Parts.
The Javascript uses a lot of JQuery (and so great chunks of it are good to go).
I want to go about it in a systematic manner and would like advice on how to structure my porting activities.
The general methodology is the old 'OpenBSD generalise' strategy - when a cross-site bug is found systematically search the code base for other places where that might occur and fix them out.
BGerrison has just pointed out that I need to consider CSS compatibility as well, so lets chuck that in the mix too.
So far all I have come up with for a methodology is:
run jslint and fix up any linting bugs
Are there any structured steps I should take or resources I should be familiar with before I plunge in?
Update
I discovered that the console in Opera 10 kinda lints your css and reports any css typos and stuff...
Javascript
JSlint is good for checking syntax and maintaing code quality
BUT browser differences are 99% DOM related
Download and use: Microsoft Script Debugger
In case something is wrong, check Bug Reports for Explorer Windows
CSS
W3C CSS validator
CSS Differences in Internet Explorer
I have developed a html file. It is working fine in IE6 and IE7. When I run the same html file in IE8, the design is not the same and the Javascript is not working properly. It is showing browser's "Compatibility view"?
How do I fix this?
It is difficult to really help you as you are not giving us enough information. Your question is very broad in the sense that getting your website to display the same in all browsers is a lot of work and the reasons why a particular layout is not working in a particular browser are just about infinite.
A few important things to get you started on your journey, though:
Use a DOCTYPE or you'll throw browsers into quirks mode.
Reset your CSS so you can apply the styles you want to elements.
Use a Javascript library - the popular one around these parts is jQuery, and it is the one I personally recommend. However, it doesn't really matter which one you go with as long as you use one. A lot of smart guys have put a lot of hours into taking care of all the incompatibilities between browsers. Trying to do a lot of dynamic stuff on your website with pure Javascript is bordering on masochistic.
Once I started doing these things, making my site work the same across browsers got a whole lot easier.
Give this a read, it details the things that cause IE8 to switch to compatibility mode, and how to fix them.
http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
You must give us some example codes (or even working website) and do something like:
Website validation (html markup, css and javascript)
Test it on another modern browser (opera, firefox, chrome, safari, etc)
Do you adhere to web standard when building web?
Do you rely on CSS hacks?
Did you know that Trident rendering engine on IE6 & IE7 didn't even pass ACID 2 test? which mean have a lot troubles with CSS implementation...
Then we might be can help you