My site doesn't work in x browser

Web designers who are used to working exclusively with Internet Explorer may find that their webpages don't work properly in alternative browsers like Mozilla Firefox, Opera, and Safari. In the vast majority of these cases, the problem ends up being due to errors in the webpage code that Internet Explorer handles differently from other web browsers, or use of elements and properties that Internet Explorer implements incorrectly.

History

Internet Explorer is notorious in standards-based web development communities for its poor implementation of web standards. Web standards help to ensure that your webpage works properly in all modern web browsers and any web browsers that may appear in the future. The core web technologies, including HTML, CSS, and DOM (the thing you are typically using the most in JavaScript) are developed by an organization called the World Wide Web Consortium (W3C). This group is recognized by the developers of all major web browsers, including Internet Explorer, as being the foremost authority, and all developers aim to fully support their specifications.

However, in the past not everyone understood the importance of standards. When Internet Explorer was rushing to compete with Netscape, they added heaps of proprietary features and began encouraging web developers to use them. These new features were often poorly designed and redundant, and the W3C rejected most of them. The W3C instead developed better designed features that other browsers were quick to adopt.

Microsoft began including Internet Explorer in the default installation of Windows, and Netscape quickly faded from the public eye. At this point, Microsoft felt it unnecessary to continue putting their resources into Internet Explorer. For half a decade, Microsoft made no significant improvements to its support for web standards. During this time, other web browsers like Mozilla Firefox, Opera, and Safari have been constantly improving and now support most of the major W3C specifications to the letter.

Today, Internet Explorer is buggy, full of incorrectly implemented features, and is regularly cursed by top dogs in the web design business for all of the trouble it gives. Yet at the same time, most of the public uses it, so most web developers are forced to support it. Some who are new to the business or have had limited exposure to the issues of web standards feel that what the W3C says is ultimately meaningless and that Internet Explorer is the de facto standard. However, the Internet Explorer development team itself disagrees. Gradually over time, they plan to dissolve most of these quirks and follow the W3C specifications more and more closely. The differences you see in the rest of the browsers aren't problems, but the future.

Problem

Internet Explorer is full of problems, but that doesn't matter much if your webpage is too. If you forget to close a tag or have some other grammar problem, you will force the browser to guess what you were intending. You can't expect different browsers to guess the same way; in fact, some might refuse to guess at all. Code your page right and it will save a lot of headache in the long run.

If you use an incomplete doctype or none at all, you will trigger something called “quirks mode”. Web browsers use this method as a way to keep from breaking old sites that relied on browser bugs, or quirks. Quirks mode is different for each browser, and is generally much harder to develop for and maintain than the alternative “standards compliance mode”.

And then there's good ol' Internet Explorer, the stubborn mule of web design. It is important to remember that just because Internet Explorer displays your page the way you like doesn't mean it's displaying it correctly. I have heard countless reports, and agree from personal experience, that when you design a standards-compliant website first in Firefox, it just about always works first go in Opera, Safari, and Konqueror, but Internet Explorer screws it up. If nothing else, this should be a hint that it probably isn't Firefox or Opera that's getting your site wrong; it's Internet Explorer.

Solution

The first thing you need to do is make sure you're using a proper doctype. A doctype looks like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and exists on the first line of the HTML file, just before the <html> tag. If you are already using a doctype, make sure that it is one marked “A” or “S” in this table for most major browsers. This will make a significant difference in how different browsers treat your page, and they will adhere more closely to the standards.

Next, you need to make sure your webpage uses only the language and grammar defined in the official HTML and CSS languages. In the web design business, this is known as “validation”. The following validators are provided by the World Wide Web Consortium and are generally the most accurate.

Finally, you can start to deal with legitimate differences between browsers. You can use this standards support resource to see where each web browser is lacking.