JavaScripting Netscape 6: No More Sloppy Code

By Andrew King

Abstract

This article shows how to adapt your JavaScript and HTML to support Netscape 6 and the DOM. Using real-world examples we illustrate several common coding techniques that fail in DOM-compliant browsers, and offer some solutions. Essentially, Netscape 6 forces you to clean up your sloppy code.

Netscape 6's Heritage

Netscape's Netscape 6 (NS6) and Mozilla are based on an earlier version of the Gecko rendering engine, a massive open source project spearheaded at mozilla.org. NS6 claims to be the most standards-compliant browser out there with support for DOM 1/2, CSS1/2, HTML 4.01, and ECMA-262.3 while Internet Explorer 5.5 (IE5.5) supports DOM 1 and CSS 1 with partial support for CSS 2. Therefore it is possible to code cross-browser for NS6/Mozilla, IE 5.5, etc. when using DOM 1 and CSS 1. This DOM-based coding technique leverages the work you need to do to support NS6 and should work in future versions of all DOM-compliant browsers. (IE 5+ supports both the W3C's DOM and their own DOM so you have a choice between the past and the future).

Introduction

Go to a DHTML-enabled site today with Netscape 6 (NS6) or Internet Explorer 5.5 (IE5.5) and you may see nothing, or worse yet, an error. Many pre-DOM scripts don't work on these newer browsers, usually due to invalid HTML, outdated sniffing techniques, or code based on proprietary extensions of one browser or another.

In the process of updating our DHTML news clients for WebReference.com and JavaScript.com, we discovered some puzzling problems in NS6 and IE 5.5. We found NS6 to be less tolerant of sloppy HTML and non-modularized JavaScript. Improperly nested tags caused incomplete page loads, external JavaScript files didn't load, onloads didn't fire, and other timing problems occured for no apparent reason. At WebRef we're here to ease your pain. Using real-world examples we document common scripting techniques that fail in these DOM-compliant browsers, and present some solutions that are browser-independent and standards-based.

You have a choice. You can keep updating your code for each new browser iteration with browser-specific fixes or you can adopt an API (like Doc JavaScript's) or code for the DOM.

Contents

Standards (DOCTYPEs/HTML/CSS/JavaScript/DOM)

HTML Tips and Tricks

NS6 and Nested HTML Tags
NS6 and Table Spacing

DOM Tips and Tricks

Browser Sniffing
Creating Elements
Referencing Elements

JavaScript Tips and Tricks

Objects/Functions defined in Dynamically Loaded Scripts are not defined until the Script block completes
Element-dependent Code is not defined until the HTML page loads

Test cases

Summary and further reading