Netscape DevEdge

Skip to: [content] [navigation]


Live Technote
Updating DHTML Web Pages for next generation browsers:
What you need to know about the layer tag, document.all, and other proprietary extensions and how to work with them in a cross browser world.

      by Marcio Galli
Gecko Technology Evangelist
           N e t s c a p e   C o m m u n i c a t i o n s
Created May 2001; Updated April 2003. Suggestions?
more about
Netscape Gecko

This document is intended to help developers update Dynamic HTML pages using Web Standards. This document provides recommendations for updating the HTML markup in your web pages, then provides updates to the JavaScript code. All the information provided here is "as-is" and is subject to change at any time. If you have cases that match with those described in this document or have new cases you would like to share with us, please let us know.




Updating the Markup
Tags Support Matrix

The following table enumerates the common elements used in Dynamic HTML web pages and the status of their support in each popular browser. These elements are generally used to provide rich positioning and visual control for HTML content. Note that not all these elements are considered standards. Elements like LAYER and ILAYER are examples of elements that are outside of the HTML standard. We recommended using standards in all cases for cross-browser compatibility. The best HTML to use as a substitute for layers, when possible, is the DIV tag.

 TAGS  Description Netscape 7 and Mozilla Internet Explorer 5 and 4 Netscape Navigator 4.x
 LAYER proprietary TAG - - supports
 ILAYER proprietary TAG - - supports
 SPAN HTML 4 supports supports supports
  DIV HTML 4 supports supports supports
 IFRAME HTML 4 supports supports -
table 1 - Tags Support Matrix - commonly used tags in DHTML.

Example Cases

The following list enumerates the common cases where proprietary tags are used to display and set rich positioning for HTML elements. Each proprietary case is followed by a recommended replacement. Note that the recommendation may be not the exact solution in all cases. The idea is to offer a solution based on web standards that also works in all popular browsers (Netscape 7, Mozilla 5, Navigator 4.x and IE). To see the cases working, use the link below the list.


Proprietary Example Cases Standards Recommendation
LAYER with left, top and name attributes. DIV
LAYER with left, top, width, height, background. DIV
LAYER with left, top, width, height, background and clipped area. DIV
LAYER no visible (above example with the hidden layer). DIV
LAYER area loading an external web page.  IFRAME and LAYER
See all the cases (TAG Matrix) See all recommendations (TAG Matrix)

Recommended General Solution

The general recommendation for cross-browser markup is to use the DIV element in combination with Style Sheets (either inline or via the class attribute).
Cases of positioning using DIV:
  • DIV with inline style and basic positioning (absolute,left,top,width,height)
See sample See source
  • DIV with inline style and positioning attributes (absolute,left,top,width,height, clip and background)
See sample See source
  • Above example using a DIV and class
See sample See source

Note about using the SPAN element:

The SPAN element is a web standard as defined in the HTML specification. However, web developers often use this element in the wrong way. In general, the SPAN element should be used only when you need to enclose HTML content in an inline way. We do not recommend using width and height attributes with SPAN elements.


JavaScript code fork

This section covers the use of JavaScript in Dynamic HTML web pages to provide access, control, and modification of HTML elements like DIVs and non-HTML elements such as the LAYER and ILAYER element.

The structure of a cross-browser dynamic HTML web page basically consists of two important items: the client-side sniffing and the code fork. Client-side sniffing code is JavaScript that evaluates objects (document.layers, document.all or the browser user agent string) to verify which browser is in use. This verification process points to an implementation for each browser case. After this code fork, fortunately, web standards can be used to create a single code base. When you use client-side sniffing and a code fork, your client-side code will look something like the following example (right side of the table), in which N4.x, IE4+ and standards compliant browsers (such as Netscape 6.x, Netscape 7.x, Mozilla5+ and future browsers based in the W3C recommendations) are supported.

Common Client Sniffing and Recommendation

 

Common JavaScript Client Sniffing Recommended JavaScript Client Sniffing
<html>
<head><title>My xBrowser Page</title>
<script>
  function start() {
    if(document.layers) {
      // Nav 4.x code fork...
    }
    if(document.all) {
      // IE 4/5 code fork...
    }
  }
</script>
</head>
<body onload="start()">
  <div id="foo" ...>
     Foo
  </div>
</body>
</html>
<html>
<head><title>My xBrowser Page</title>
  function start() {
    if (document.getElementById) {
      // Standards Compliant code fork...
    }
    else if (document.all) {
      // IE 4/5 code fork...
    }
    else if (document.layers) {
      // Nav 4.x code fork...
    }
    else {
      // other browsers
    }
  }
</script>
</head>
<body onload="start()">
  <div id="foo" ...>
     Foo
  </div>
</body>
</html>

DHTML Examples

The following is a selection of DHTML cases. Each case features a sample with three code forks (N4.x, IE4+ and Standards Compliant). If you have cases you think are widely used by developers, please provide feedback.

Cases Examples
Dynamically creating a visual box element
[N4.x] new Layer()
[IE] parentElement.innerHTML
[Standards] document.createElement()
sample , source
Accessing a DIV element and setting style properties:
[N4.x] document.elementID or document.layers["elementID"]
[IE] document.all["elementID"].style, document.all.elementID.style or elementID.style
[Standards] document.getElementById("elementID").style
sample , source
Accessing a DIV element, getting and setting style properties:
[N4.x] document.elementID or document.layers["elementID"]
[IE] document.all["elementID"].style, document.all.elementID.style or elementID.style
[Standards] document.getElementById("elementID").style
sample , source
Assigning an event handler to DIV element (onmouveover event):
[N4.x] document.elementID.onmouseover=yourHandlerFunction or document.layers["elementID"].onmouseover=yourHandlerFunction
[IE] document.all["elementID"].onmouseover=yourHandlerFunction, document.all.elementID.onmouseover=yourHandlerFunction or elementID.onmouseover=yourHandlerFunction
[Standards] document.getElementById("elementID").addEventListener("mouseover", yourHandlerFunction,true);
sample , source

References

Sample Code and additional resources in this technote:

Learning the DOM and Web Standards

Related Standards and Technical Documentation

Feedback and contributions
Your feedback is important. If you think this technote is useful or if you have suggestions or questions, please send us feedback.
A+R