While this incompatibility may be a well-known difference between Netscape 4 and standards-adherent DHTML JavaScript writers, it was a frustrating discovery for someone who recently started writing serious low-level cross-browser code. The problem has to do with how Netscape 4 encases elements (objects) contained within a layer (<LAYER>, <DIV>, <SPAN>) style sheet reference. Let’s start by showing a typical non-layered element and see how it is referenced in JavaScript:

<img src="SomeImage" name="MyImage">

According to the JavaScript documentation, this object and its properties (width, height, border, etc.) can be referenced using the document.images["MyImage"].property reference and, in fact, works in all browsers tested. However, when that same element is included within a layer container, Netscape 4 no longer includes that object in the main document’s object model. Consider the following layer construction:

<div id="MyLayer" style="position:absolute">
  <img src="SomeImage" name="MyImage">
</div>

With Netscape 6 and Internet Explorer 5/6, the image element’s properties can still be referenced using the document.images["MyImage"].property reference; however, not in Netscape 4. It seems that Netscape 4’s implementation of layers actually creates a supra-document reference for its layers. So, to reference this object one must use the following JavaScript reference technique, document.MyLayer.document.images["MyImage"].property in order to locate the object and its properties.

While this difference may be plainly documented somewhere, I was unable to find it and only discovered the difference after careful review of some Netscape 4 DHMTL scripts. And, yes, this problem was further exacerbated by the fact that no JavaScript console errors were generated, the script just refused to work in Netscape 4.