February 12, 2000 - Navigator's vs Explorer's DHTML | WebReference

February 12, 2000 - Navigator's vs Explorer's DHTML

Yehuda Shiran February 12, 2000
Navigator's vs Explorer's DHTML
Tips: February 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The first complication is that the basic document model is different between the browsers. In Netscape Navigator, all elements are descendents of the top-level document object. In Internet Explorer, though, there is an intermediate level between the top-level document object and the DHTML elements of the page. Let's take the DIV tag as an example for a DHTML element that exists in both Netscape Navigator and Internet Explorer:

<DIV NAME="divName" ID="divID">...</DIV>

A reference to this DIV element in Netscape Navigator is as follows:


while an Internet Explorer's reference to it will be as follows:


The second complication stems from the way properties of DHTML elements are referenced. In Netscape Navigator, the properties are immediate descendents of the DHTML object. In Internet Explorer, though, the properties are descendents of the style object, which is a descendent of the DHTML object. Continuing our previous DIV example, its left property, for example, is referenced in Netscape Navigator as follows:


while it is referenced in Internet Explorer as:


The third complication is that properties with matching names do not behave exactly the same in both browsers. The classic example here is the DHTML's left and top properties. In Netscape Navigator, they return a numeric value that represent the distance of the DHTML element from the left and top sides of the window, respectively. In Internet Explorer, though, these properties return a string that includes both the numeric value of the distance, as well as the measuring units (px for pixels, for example). Obviously, you cannot use this string for mathematical operations, such as addition and subtraction. Luckily, Internet Explorer provides two other properties, pixelLeft and PixelTop, that return exactly what the left and top properties return in Netscape Navigator. Summarizing, there are cases of different properties that return the same values, and there are cases of exact same properties that return different values.

The fourth complication is the way these browsers reference HTML elements inside the DHTML elements. In Netscape Navigator, you have to access the document object which is a descendent of the DHTML element:


and then reference descendent HTML elements by their NAME attribute value. Let's position an IMG element inside our previous DIV element:

<DIV NAME="imgName" ID="imgID">
<IMG NAME="imgName" ID="imgId">
<FONT FACE="Arial,Helvetica,Verdana" SIZE="2">

The IMG element's reference in Netscape Navigator is:


and the IMG's SRC attribute is referenced in JavaScript as:


The situation in Internet Explorer is much simpler. The IMG element can be referenced directly from documental object, and its SRC attribute is referenced in JavaScript as:


The fifth complication is that some DHTML elements do not support the same event handlers. The DIV element in Internet Explorer supports the onClick event handler, while the DIV element in Netscape Navigator does not. The IMG element behaves the same way. A variation on this complication is that there are DHTML elements that are supported by one browser and not the other. For example, the LAYER element, for example, is supported only by the Netscape Navigator.

Learn more about Netscape Navigator's and Internet Explorer's different DHTML models in Column 27, Differences between Browser's Document Models .