What will cause a site to look and act OK in IE but not in Firefox?

Question

I realize this question is the reverse of most of this sort. In other words, things "look great" in Internet Explorer, but look crappy or don't work at all on Firefox/Chrome/etc.

I have a .NET web application. When it was first designed/built back in 2003, for several reasons that are no longer relevant, the app was built for IE-only. We're now wanting to expand to include support for more browsers, however, for most of the pages there is "something" or other wrong.

• Elements don't render at all
• Javascript events don't fire
• Elements are rendered incorrectly

I have a hunch that most of this is CSS related and that it is due to the fact that IE has historically "fixed" non-compliant HTML with its own rendering fix. We're not in a position to completely rewrite everything, but I'm looking for some hints as to where we might look as a starting point.

I understand that specific solutions require specific examples, but what I'm looking for is a general concept or class of solutions. Basically the question is this. Based on the fact that the app looks great in IE, but like crap in Firefox. Is there anything you can infer that will help me focus my research to know where to look for a solution?

Answer 1

Probably it makes intensive use of ActiveX and other M$ exclusive stuff.

You should consider designing websites using tools that does not ties you to a specific platform/browser.

Answer 2

In 2003 web developers in general didn't have great knowledge of consistent cross-browser, standards-compliant CSS and Javascript.

Considering it was IE-specific, it most definitely used IE-specific and non-standard things such as:

• IE specific DOM functions ( attachEvent, NOT addEventListener )
• IE specific Microsoft.XMLHttp instead of window.XMLHttpRequest
• IE specific non-spec conforming CSS rules
• DOM 0 standard document.forms.blah referencing
• Invalid HTML

Based on the fact that the app looks great in IE, but like crap in Firefox. Is there anything you can infer that will help me focus my research to know where to look for a solution?

• Make sure the source is NOT coming from Microsoft because usually Microsoft developers are out of touch with standards. There are exceptions, but as a general pointer.
• Usually you want to avoid solutions from browser-vendor as they'll cater toward that specific browser but Opera/Webkit ( Chrome, Safari )/Firefox devs are usually more knowledgeable in terms of cross-browser solutions and compliance with the standards than M$ ones.
• Use the W3 validators to correct markup. Use whatever developer tool based on your browser ( Firebug, Chrome Developer, Dragonfly )
• Use sites that archive cross-browser bugs.

Answer 3

First thing, you'll need Firebug, which is an extremely helpful debugging tool for Firefox. With that, you'll be able to debug and set breakpoints in your Javascript. You can also set Firebug to break on errors so you'll be able to track those down.

From there, I suggest validating your HTML and CSS, which will help you pinpoint invalid markup that is likely not cross browser.

• W3C HTML Validator
• CSS Validator

Also, there is a handy tool called jslint which helps track down Javascript "code smells" that should be refactored.