Browser-specific Dynamic Positioning Differences

As stated earlier, both Microsoft and Navigator support changing an element's CSS-P attribute values dynamically, after the Web page loads. However, each browser uses a different technique and, in some cases, different attributes, to perform the same action.

With Netscape, the positioned element is accessed via the document object, and can be found within the layers built-in array, or can be accessed directly from document. So if a Web page contains the following DIV block:

<DIV id="test" style="position:absolute; left: 100; top: 150">
some contents
</DIV>

changing the element's position using JavaScript can be accomplished using the following technique:

document.test.left = 10;
document.test.top = 10;

or the following technique:

document.layers["test"].left = 10;
document.layers["test"].top = 10;

The Resources section, below, has a link to Netscape's Dynamic HTML documentation.

Microsoft has a different technique for applying dynamic HTML changes. First, the element can be accessed via a couple of different techniques. One technique is to access the element directly by its name, or identifier. A second technique uses the all built-in collection and accesses the element directly using the item method, or indirectly using the tags method to access a group of elements. In addition, all CSS style changes, including those for positioning, occur through the style attribute/object. So, applying a change of location for the DIV block, defined earlier, could be accomplished using:

test.style.pixelLeft = 10;
test.style.pixelTop = 10;

or using the technique:

document.all.item("test").style.pixelLeft = 10;
document.all.item("test").style.pixelTop = 10;

Microsoft also supports more than one attribute that represents the left position of the element. With IE 4.x, the "left" attribute is actually a string with a unit of measurement type as well as the measurement value. To set a pixel value for either the top or left properties, the developer needs to use the pixelLeft or pixelTop properties. The resources section below has a link to Microsoft's online documentation that includes a complete listing of the DHTML attributes.

You can code for each browser each time you want to make a change, such as in the following:

if (navigator.appName == "Microsoft Internet Explorer") {
   test.style.pixelLeft = 10;
   test.style.pixelTop = 10;
   }
else {
   document.layers["test"].left = 10;
   document.layers["test"].top = 10;
   }

This type of "test and change" routine works. However, having to repeat the browser testing each time one wants to use DHTML could and will get tiring. In addition, if either browser changes its technique, then all of the DHTML implementations would need to be altered in all of the Web pages where the implementations are used.

So, what's a solution to the cross-browser DHTML problem? Creating cross-browser objects, and hiding the browser differences.

Creating Cross-Browser DHTML Objects
Creating Cross-Browser DHTML Objects
Creating Cross-Browser Objects