Introduction to DHTML

Dynamic HTML is a combination of CSS(P) and JavaScript. Specifically, it is using JavaScript to dynamically change the attributes of a CSS element. It is called "dynamic" because its properties can be changed dynamically, or on the fly. As you know, most HTML elements cannot be changed without reloading the page. Imagine the possibilities.

To refresh your memory, here is an example of a style rule located in the head of the document:

<style>

#blockDiv { position:absolute; left:200px; top:200px; width:300px; height:300px; visibility:visible; z-index:2; background-color:#660099; layer-background-color:#660099; background-image: URL(../images/spacer.gif); }

</style>

Then in the body of the document:

<div id="blockDiv"></div>

The pound(#) sign signifies that the rule name will be used as the value of the ID attribute in a div tag. When implementing DHTML, div tags are used almost exclusively and are given an ID.
note: the above example uses a background image to force the element to display. Because the div in the body does not contain any text or images, NN will not display the element without it, or without using clipping declarations. You could leave off the background image if your div contains any HTML or plain text.

As you've already experienced, implementing CSS(P) that is 100% reliable on both browsers can be quite sketchy. And now we're adding JavaScript to the mess. Remember, it is the attributes of a style rule that we can manipulate using JavaScript.

When it comes to using JavaScript to manipulate CSS elements, code gets real deep real quick. This is because of the differing browser DOMs.

DOM stands for "Document Object Model". Simply put, it is the JavaScript path to objects on a page. For instance, the DOM for referring to a text field in a form is pretty universal in a cross-browser sense:
document.formName.textfieldName
and wa-la, you've got access to the text field's properties.

With DHTML it is not so simple. The DOM for the version of Netscape that comes bundled with Communicator 4.76 is radically different to Internet Explorer 4.0's DOM, and NN6's DOM is yet again different from both, yet contains bits and pieces of both DOMs. What this really means is that the JavaScript path to CSS elements and their properties is going to be different for each browser. The good news is that Netscape 6 usually supports syntax from both NN4 and IE4.

Fasten your seatbelts and put on your thinking caps.

Resources:
Netscape's DevEdge Online DHTML Manual
Microsoft's DHTML References