Porting a web application to work in IE7

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.