February 12, 2000 - Navigator's vs Explorer's DHTML
February 12, 2000|
Navigator's vs Explorer's DHTML
Tips: February 2000
Yehuda Shiran, Ph.D.
DIVtag 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
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,
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 NAME="imgName" ID="imgID"> <IMG NAME="imgName" ID="imgId"> </DIV> <FONT FACE="Arial,Helvetica,Verdana" SIZE="2">
The IMG element's reference in Netscape Navigator is:
The situation in Internet Explorer is much simpler. The
IMG element can be referenced directly from documental object, and its
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 .