The first step to writing cross-browser scripts is to understand the differences between the browsers. As a starting point, the table below outlines each browser's support for accessing elements on the page. The following properties are exposed on the document object:
In addition to the above properties, some individual elements also provide access to elements. For example, each form in the form's collection exposes the collection of input, select, and textarea elements associated with the form. The select element further exposes an options collection representing each list box choice. These collections are all supported by the 3.x browsers and later.
Internet Explorer 4.0 extends the above collections by also exposing an all and children collection on every element. This allows
you to find the elements contained by any other element. For example, you can examine a <P>aragraph element and then use
the children collection to determine that there is a <B> and <EM> element contained within it. The difference
between children and all are whether only immediate descendents are in the collections or whether every descendent is contained
within the collection. For example:
The DIV element's children collection contains the H1 and P element while the DIV element's all collection contains the H1, P, and EM element. In addition to the children and all collection, Internet Explorer also exposes additional collections for easy access to the document's styleSheets and an areas collection on map elements.
Netscape Navigator 4.0 does not expose additional collections but does have special handling for their
layers collection. The layers collection is somewhat similar to the Internet Explorer's children collection
but is limited only to element's that are positioned. The layers collection only contains layers immediately
contained by the document. If a positioned element is nested within another positioned element, the nested
element is not exposed through the document, but is instead exposed as collections on the containing layer's document. For example:
In the above example, the document's layers collection contains a reference to div1 and div2. The DIV, "noPosition" is not in any collection because it is not positioned. The DIV, "nestedDiv1", is not in the document's layers collection because it is contained by the positioned DIV, div1.
Each layer in Netscape is actually a pseudo-document. This means that each individual layer object
exposes a document object with its own set of collections. Therefore, access the nestedDiv1 you need to first get a reference
to div1 from the document's layers collection, then access div1's document object, then access the psuedo-document's layers collection,
and finally you can reference nestedDiv1:
To compare to Internet Explorer, you can reference the nestedDiv either directly or indirectly similar to Netscape. The difference
is in Internet Explorer no psuedo-document is ever created:
The psuedo-document in Netscape has a very significant effect on the way Netscape treats documents. Whenever
a positioned element is created, the positioned element is treated by Netscape to be a separate document. Unfortunately, this
can cause a lot of problems, especially when creating cross-browser documents and even documents that you want to degrade gracefully.
The problem is most apparent when forms are introduced:
When CSS-Positioning specification was created, one of the top features was the ability to now create real 2-D forms like traditional form packages. Unfortunately the above does not work in Netscape. Worse, the input controls are not even displayed. The reason is that each positioned DIV is considered a separate document. As a separate document, imagine you took the contents of the positioned element and pasted it into its own page. Now the input elements are no longer contained within a form. Netscape cannot display input elements outside of a form, hence nothing is displayed.
The problem in Netscape is that they morph the behavior of the document in response to a stylistic attribute. This violates the fundamentals of CSS where all CSS is supposed to do is add style. To better understand why this is the case, imagine you viewed the above page in an older browser without CSS-P support. The above form would display correctly with 2 input elements. However, rather than be positioned they will be in flow. This is a good thing as it allows you to create smart pages that degrade gracefully. Internet Explorer supports the separation of style and content and has no difficulty with positioned elements.
Unfortunately what this means is that even with DHTMLLib or any other cross-browser library you are still constrained by the functionality and limitations of the particular browser. If you must solve the form positioning problem, you can read about a custom work-around (not using DHTMLLib) we created.
Next we discuss differences in property handling and dynamic page layout. Internet Explorer exposes every attribute on every element as a property and most properties are read-write. Netscape Navigator exposes a small set of attributes and most of them are read-only.
Page 1:DHTMLLib 2.0
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.