Transitioning from Proprietary DOMs and Markup to W3C Standards: Enhancing Pages That Use LAYER, document.layers[], and document.all to Support Standards

Greetings! If you've been referred to this page, it's probably because your site has a web page that depends on one of the following proprietary Navigator 4 or Internet Explorer 4/5 features:
 

Proprietary Nav4 Features Proprietary IE4/5 Features
document.layers[], document.elementName, and other Nav4 Layer DOM features document.all and other IE4/5 DOM features
document.tags, document.ids, document.classes, or document.contextual() for setting CSS properties from Nav4 JavaScript document.styleSheets[] for setting CSS properties from Internet Explorer JScript
LAYER, ILAYER, and MULTICOL elements MARQUEE and BGSOUND elements
DIV SRC= transclusions (external content imported into an HTML page using <DIV SRC=...)
use of .jar files for SmartUpdate .cab files

These features of Navigator 4 and Internet Explorer 4/5 Dynamic HTML were not adopted by the W3C HTML 4.0 or Document Object Model specifications, so they are not supported in new Mozilla-based browsers such as Netscape 6 that are built on W3C standards. This page summarizes how to enhance pages that use these proprietary features so that they are fully W3C-compliant and will display on all compliant browsers (such as Netscape 6, Mozilla, Customzilla, etc.) and devices (such as consumer browsing appliances that embed the Gecko layout engine).

Contents:

What Do Netscape 6 and Other Mozilla- and Gecko-based Browsers Support?

Netscape 6 features the industry's best support for HTML 4.0, CSS1, XML, RDF, Document Object Model level 1. It also supports the "DOM level 0" (an informal term referring to the JavaScript Document Object Model features supported by both Navigator 3 and Internet Explorer 3) for backward compatibility with existing scripts and features of CSS2 positioning, DOM2 Events, and the DOM2 CSS Interface. This unprecendented breadth and depth of W3C standards support will enable the creation of new web content and applications never before possible, and all such standards-based content and applications will be usable in any standards-compliant browser on any platform and on any standards-compliant device. Netscape 6 will be the first browser ever to deliver the standards support that developers and advocacy groups have been calling for for years. For a detailed list of the standards Netscape 6 and the Gecko layout engine will support, see http://www.mozilla.org/newlayout/faq.html. For a comparison of Netscape 6's standards support to that of Internet Explorer 5, take the Netscape Standards Challenge yourself at http://home.netscape.com/browsers/future/standards.html, and read the press release from WebStandards.org at  http://www.webstandards.org/ie5.txt.

What Nav4 Features Don't Netscape 6 and Other Mozilla- and Gecko-based Browsers Support?

  • The LAYER and ILAYER elements are considered unsupported elements by Mozilla and Netscape 6. Per the HTML 4.0 specification, Mozilla, Netscape 6, and other Gecko-based browsers will silently ignore the <LAYER>, </LAYER>, <ILAYER>, and </ILAYER> tags and render the HTML page as if those tags were not present.
    • If the LAYER or ILAYER element enclose other elements, those elements are rendered as content by Netscape 6.
    • If the LAYER or ILAYER element link in external files via their SRC attributes, those files are not included within the HTML page as the LAYER and ILAYER element and all their attributes are silently ignored by Netscape 6.
  • The NOLAYER element itself is considered an unsupported element by Netscape 6. Per the HTML 4.0 specification, Netscape 6 and other Gecko-based browsers will silently ignore the <NOLAYER> and </NOLAYER> tags and render the HTML page as if they were not present. Keep in mind that Gecko will silently ignore the <NOLAYER> and </NOLAYER> tags themselves, but any elements enclosed between <NOLAYER> and </NOLAYER> will still be rendered. This behavior in fact makes it easier to author a single page supporting Navigator 4 and Netscape 6 when necessary:
    • Content for Navigator 4 can be referenced by a <LAYER SRC=...> or <ILAYER SRC=...> tag that will transclude (import into the page) an external file, and these Navigator 4-specific tags will be silently ignored (and the referenced files not imported) by Netscape 6.
    • Conversely, content for Netscape 6 can be enclosed between <NOLAYER> and </NOLAYER> tags. Netscape 6 will silently ignore the <NOLAYER> and </NOLAYER> tags themselves but render everything inside them. Navigator 4, on the other hand, will silently ignore the <NOLAYER> and </NOLAYER> tags and everything between them.
  • The DIV element, which is part of HTML 4.0, will of course be supported. However, the DIV element's SRC attribute that was supported by Navigator 4 will be ignored, so external files will not be transcluded into the HTML page.
  • document.layers[] and other features of the Navigator 4 Layer DOM will not be supported. Web pages should not execute on Netscape 6 JavaScript code that uses these Navigator 4 Layer DOM features.
  • document.tags, document.ids, document.classes, or document.contextual() for setting CSS properties from Nav4 JavaScript. Web pages should not execute on Netscape 6 JavaScript code that uses these Navigator 4 Layer DOM features.

Examples: How Nav4, Nav6, and IE4/5 Handle Markup

Netscape 6 silently ignores the <LAYER>, </LAYER>, <ILAYER>, </ILAYER>, <NOLAYER>, and </NOLAYER> tags and renders the HTML page as if those 6 tags were not present (i.e. as if the file had been edited to remove those 6 tags only). DIV will be rendered, but the SRC= attribute if present will be ignored. The contents of LAYER, ILAYER, and NOLAYER (any tags inside them) will be rendered as content.

Here is a summary of some techniques for achieving cross-browser and backward compatibility:

  • including an external file by wrapping IFRAME in LAYER of same name:

    • Nav4: LAYER rendered, IFRAME ignored
    Nav6 and IE4/5: IFRAME rendered, LAYER ignored
    <LAYER NAME="foo" SRC=foo.html>
    <IFRAME ID="foo" SRC=foo.html>
    </IFRAME>
    </LAYER>
     
  • including an external file by wrapping LAYER in IFRAME of same name:

    • Nav4: LAYER rendered, IFRAME ignored
    Nav6 and IE4/5: IFRAME rendered, LAYER ignored
    <IFRAME ID="foo" SRC=foo.html>
    <LAYER NAME="foo" SRC=foo.html>
    </LAYER>
    </IFRAME>
     
  • including an external file by using adjacent LAYER and IFRAME of same name:

    • Nav4: LAYER rendered, IFRAME ignored
    Nav6 and IE4/5: IFRAME rendered, LAYER ignored
    <LAYER NAME="foo" SRC=foo.html>
    </LAYER
    <IFRAME ID="foo" SRC=foo.html>
    </IFRAME>
     
  • selectively displaying some content for Nav4 (via transcluded external file) and other content for IE4+ and Nav6 (enclosing in NOLAYER so Nav4 ignores everything between <NOLAYER> and </NOLAYER>):

    • Nav4: LAYER rendered, NOLAYER and contents ignored
    Nav6 and IE4/5: LAYER and NOLAYER ignored, DIV rendered
    <LAYER NAME="nav4content" SRC=foo.html>
    </LAYER>
    <NOLAYER><DIV ID="nav6content"> ... bunch of elements ... </DIV></NOLAYER>

What IE4/5 Features Don't Netscape 6 and Other Mozilla- and Gecko-based Browsers Support?

  • With one exception, the convenience property innerHTML (which was supported due to requests from the developer community),  features of the proprietary Internet Explorer 4/5 DOM are not be supported. Web pages should not execute on Netscape 6 JavaScript code that uses these Internet Explorer 4/5 DOM features. Two particular features of the Internet Explorer 4/5 DOM to keep in mind:
    • document.all
    • document.styleSheets[].addRule for setting CSS properties from IE4/5 JScript.
  • Proprietary Internet Explorer elements (markup tags) such as EMBED and BGSOUND.

What Should I Do for New Development Starting Now?

Avoid these deprecated Navigator 4-only features in new development:
  • In your HTML markup, do not use:
    • LAYER or ILAYER elements
    • the SRC attribute of the DIV element.
  • In your JavaScript code, do not use:
    • features of the Navigator 4 Layer DOM such as document.layers[]
    • document.tags, document.ids, document.classes, or document.contextual() for setting CSS properties from Nav4 JavaScript
Likewise, avoid using Internet Explorer proprietary features in new development unless that browser must be supported and the proprietary features must be used because W3C standards haven't been implemented. In that case, detect the client and conditionally execute the proprietary code only when running on IE. See  How Do I Support Internet Explorer If It Doesn't Support Standards?, below.

Design your applications to rely on features of the W3C standards. That way, your applications will run on any compliant browser or device.

How Do I Upgrade an Existing Web Page That Uses Proprietary Features to Support the W3C Specifications?

Map Navigator 4-only and Internet Explorer-only features to W3C specification features as follows:
 
Proprietary Feature W3C Specification Feature
Nav4 LAYER HTML 4.0 DIV
Nav4 ILAYER HTML 4.0 IFRAME
Nav4 LAYER SRC=, ILAYER SRC=, DIV SRC= HTML 4.0 IFRAME SRC=
IE3/4/5 MARQUEE HTML 4.0 DIV with content string rotated over time by JavaScript via the DOM level 1
Nav2/3/4/5 BLINK CSS1 text-decoration:blink (Note: user agents are required by the CSS1 specification to recognize the blink keyword, but not to support the blink effect, so CSS1-compliant browsers may or may not make the text blink on the screen. The best approach is to not make content blink at all.)
IE 3/4/5 BGSOUND Use either HTML 3.2 EMBED (which has been deprecated in HTML 4.0 but will still be supported) for backward compatibility with Nav3/4, or HTML 4.0 OBJECT if you only require compatibility with Netscape 6 and IE 5 and above. Most people use EMBED in order to provide backward compatibility with as many browsers as possible.
Nav4 document.layers[] 
IE4/5 document.all
Nav4/IE4-5 document.elementName		 DOM level 1 document.getElementById()
Nav4 element.visibility = value; 
IE4/5 element.style.visibility = value;		 DOM level 2 element.style.visibility = value;
Nav4 element.left 
IE4/5 element.style.pixelLeft		 DOM level 2: parseInt (element.style.left)
Nav4 element.top 
IE4/5 element.style.pixelTop		 DOM level 2: parseInt (element.style.top)
Nav4 element.moveTo(x, y); 
IE4/5 element.style.pixelLeft = x; element.style.pixelTop  = y;		 DOM level 2: element.style.left = value + "px"; 
DOM level 2: element.style.top = value + "px";
Nav4 document.tags, document.ids, document.classes, document.contextual() 

IE4/5 document.styleSheets[].addRule (selector, declaration);

 Use the DOM level 2 CSS interface to add the appropriate rule to a style sheet in the document's HEAD. For example: 

<HTML><HEAD><TITLE>Demo</TITLE> 
<STYLE ID="ietssxyz" TYPE="text/css"></STYLE> 
<SCRIPT LANGUAGE="JavaScript"><!-- 
var targetStyleSheetID = "ietssxyz"; 

function addRuleToStyleElement (name, selector, declaration) 
{  var styleSheetElement = document.getElementsByID(name); 
    var styleSheetLength = styleSheetElement.length; 
   styleSheetElement.insertRule (selector + " { " + declaration + " } ", styleSheetLength); 
} 

addRuleToStyleElement (targetStyleSheetID, "H1", "font-size:44pt"); 
//--></SCRIPT> 
 
Nav4 handleEvent() W3C DOM Level 2 dispatchEvent()
IE 4/5 element.innerHTML The same effect can be achieved using W3C standards by using DOM methods to set the contents of the element. (Note: because of requests from web developers, element.innerHTML is in fact supported as a DOM convenience extension by Gecko, Mozilla, and Netscape 6. However, developers using this DOM extension should be aware that this is not part of the W3C standards, and by using this they are restricting their content to IE4+, browsers/devices that embed the Gecko browser engine, and any other browser engines that emulate this proprietary IE feature.)
Legacy Feature Feature Supported in Mozilla
Nav4 .jar files for SmartUpdate of binaries
IE4+ .cab files for download of binaries		 .xpi files to support XPInstall of files of all kinds. See Jar Packaging for more information.
If you have plug-in content that calls a plug-in's Java API from JavaScript via LiveConnect, be aware that the plug-in vendor must upgrade their plug-in to support the Mozilla Plug-in API. Until then, these JavaScript calls within the content will fail silently. Contact the plug-in vendor to find out their schedule for releasing an upgraded plug-in. Mozilla plug-in API documentation: http://www.mozilla.org/docs/plugin.html
 

Note on W3C DOM2 Reflection of an Element's CSS Properties

See the W3C DOM2 Working Draft (work in progress) section 4.4, Extensions to Level 1 Interfaces. Keep in mind that according to this working draft, the values returned by the style property of an element reflect static settings in the element's STYLE attribute only, not the total "computed style" that includes any inherited style settings from parent elements. Therefore, if you wish to read and write these properties from JavaScript through the DOM2, use one of these two approaches:
  • Place all of the element's static CSS declarations (if it has any) in the element's STYLE attribute.
  • Use no static CSS declarations for the element, and initialize its CSS properties from JavaScript through the DOM.

Note on W3C DOM2 Reflection of an Element's CSS Positioning Properties

See the W3C DOM2 Working Draft (work in progress) section 4.4, Extensions to Level 1 Interfaces. The values returned by the W3C DOM2 style.left and style.top properties include the CSS unit suffix (such as "px"), whereas Nav4 element.left and IE4/5 element.style.pixelLeft (and the corresponding properties for top) return an integer. So, if you want to get the element's inline STYLE settings for left and top as integers, parse the integer from the string by using parseInt(). Conversely, if you want to set the element's inline STYLE settings for left and top, make sure to construct a string that includes the unit (such as "140px") by appending the unit string to the integer value.

innerHTML Convenience Extension in Mozilla/Netscape 6

The innerHTML property of elements as found in IE is not a feature of the W3C DOM. The contents of an element can be set by using methods of the W3C DOM Level 1. To assure the widest interoperability of code, Netscape recommends as a matter of standard policy that developers base their code on web standards rather than proprietary extensions whenever possible. However, in response to requests from web developers, mozilla.org has added support for the innerHTML DOM extension to Gecko, Mozilla and Netscape 6 builds after 19 May 2000 (Mozilla M16 and later, Netscape 6 PR2 and later). Developers who wish are welcome to use innerHTML, but they should be aware that innerHTML is not part of any standard and therefore code that uses it will be specific to IE4 and later, Netscape 6 PR2 and later, and browsers based on Mozilla and the Gecko layout engine.

What Should I Do if I Must Support Nav4 During the Transition to Netscape 6?

If you have web content or a web application that must use deprecated Navigator 4 features in order to support Navigator 4, the simplest solution is to:
  • Create one page that is for Navigator 4 only. Use whatever Navigator 4 features necessary within this page.
  • Create another web page that is for Netscape 6 and other clients with full support for W3C standards.
  • On the server side, use client sniffing to detect the HTTP USER_AGENT string and return the appropriate page for the user's client. To learn more about client sniffing, read  http://developer.netscape.com/viewsource/krock_v5.html
If you must create a single page that supports both Navigator 4 and Netscape 6, use the following techniques.
  • For your HTML markup, use one of these approaches: (see this  TechNote for more details)
    • Use a named, positioned DIV or SPAN on all browsers if that provides the needed functionality.
    • Conditionally generate the necessary markup for each browser via document.write() statements. Examples:
      • Generate a named DIV or SPAN on IE4+ and Nav6+ and an identically-named LAYER on Nav4.
      • Generate an IFRAME on IE4+ and Nav6+ and a LAYER SRC=, ILAYER SRC=, or DIV SRC= on Nav4.
    • Wrap elements intended for other browsers in a LAYER for Nav4 that has the same name. Examples:
      • Wrap a named DIV or SPAN used on IE4+ and Nav6+ in an identically-named LAYER used on Nav4.
      • Wrap an IFRAME used on IE4+ and Nav6+ in an identically-named LAYER SRC= used on Nav4.
    • Include in the document both a LAYER/ILAYER/DIV SRC=, which will be recognized and displayed on Nav4 but ignored by other browsers, and an IFRAME SRC=, which will be recognized and displayed on IE4+ and Nav6+ but ignored by Nav4.
    • Place content for Navigator 4 in an external file and import ("transclude") it into the page via a LAYER/ILAYER SRC=. Place the content for Netscape 6 and IE4+ in the page itself; put a <NOLAYER> tag before the content and a </NOLAYER> tag after it. Navigator 4 will ignore the <NOLAYER> and </NOLAYER> tags and everything they enclose.
  • For your JavaScript code, use a client sniffer (such as Netscape's Ultimate Client Sniffer at  http://developer.netscape.com/docs/examples/javascript/browser_type.html ) to determine which client the code is running on. Then include conditional forks in your code that execute the appropriate code for the current client.

How Do I Support Internet Explorer If It Doesn't Support Standards?

If you have web content or a web application that must use proprietary Internet Explorer 4/5 features in order to support Internet Explorer 4/5, the simplest solution is to:
  • Create one page that is for Internet Explorer 4/5 only. Use whatever Internet Explorer 4/5 features necessary within this page.
  • Create another web page that is for Netscape 6 and other clients with full support for W3C standards.

    • On the server side, use client sniffing to detect the HTTP USER_AGENT string and return the appropriate page for the user's client. To learn more about client sniffing, read  http://developer.netscape.com/viewsource/krock_v5.html
If you must create a single page that supports both Internet Explorer 5 and Netscape 6, use a client sniffer (such as Netscape's Ultimate Client Sniffer at  http://developer.netscape.com/docs/examples/javascript/browser_type.html ) to determine which client the code is running on. Then include conditional forks in your code that execute W3C DOM code when running on Netscape 6 and proprietary IE DOM code when running on Internet Explorer.

Do Gecko, Mozilla, and Netscape 6 Have Any Known Bugs?

 Of course they do. Here are some references:

Common Mistakes in Web Content You Should Avoid or Fix

  • Using the wrong DOCTYPE. Most of us, being human, have producted imperfect HTML markup. Unless you're absolutely certain that your pages are fully, 100% compliant with HTML 4.01 and CSS1/2, you'll want Gecko, Mozilla, Netscape 6, and IE5 for the Mac to render your web pages in "backward compatibility mode," which means that (a) the browsers will bend over backwards to work around bad code, and (b) they will support presentational hints in HTML markup that have been deprecated by HTML 4.0 and later (such as <FONT FACE= ...> ). So, use any DOCTYPE you wish except for the HTML 4.01 Transitional DOCTYPE with the explicit URI:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    ... because Gecko, Moz, N6, and IE5 Mac, by request from the content developer community, put the browser into "standards compliant layout mode" when they see this DOCTYPE. In standards-compliant layout mode, these browsers will not  emulate the quirks of older browsers, and they will ignore deprecated presentational hints in the markup such as FONT FACE=.... Unless you really, really consider yourself an expert on the subtleties of HTML 4.01 and CSS1/2 and know for sure exactly what you're doing, you probably don't want to be in this mode. This mode (and the feature of entering it upon encountering the HTML 4.01 Transitional DOCTYPE with the explicit URI, has been added (in Gecko, Moz, N6, and IE5 Mac) due to requests from web content developers who wish to be able to have their pages rendered according to the standards (without quirks or presentational hints) in standards-compliant browsers, while simultaneously in the same page including presentational hints so that it will look OK in older browsers as well.
  • Specifying a fixed width table, but then having images as content whose total width is wider than the table's specified fixed width. This is a web content coding error, pure and simple. There is no valid reason for a web developer to specify a fixed width for a table that is narrower than the combined width of the images it contains; this indicates that the web developer didn't realize how wide the images were when he/she set the fixed width. It is a markup error that should be corrected. If you make this mistake:
    • Nav4 and IE4+ would ignore the table's fixed width and stretch the table to be wide enough to display the images.
    • Gecko/Moz/N6, per the HTML specification, respect the table's fixed width in this situation, forcing the images onto subsequent lines.
    • Therefore, web pages with this mistake that looked "fine" in Nav4/IE4+ will look strange in Gecko/Moz/N6.
    • The solution is to change the fixed width so that it's wide enough to contain the images the table holds. Then the web page will look good in all browsers.

What Should I Do When I Find a Web Page that Doesn't Support Web Standards?

If you find a web page that doesn't display well in Mozilla or Netscape 6 because it uses proprietary browser features and doesn't provide equal support for web standards, please do the following:
  1. Notify the web page's owner of the problem directly. You can use these boilerplate email templates. Usually, emailing webmaster@domainname.com works.
  2. If you don't have the time to locate the page's owner or email them, or if you want to enable tracking of this page by mozilla.org, you can open a bug report in  Bugzilla on the Evangelism component, as explained on the Gecko BugAThon page.

What Can I Do to Get Vendors to Support Standards?

  • mozilla.org welcomes your participation in building the Mozilla browser and making it and all other Mozilla-based browsers such as Netscape 6 as standards-compliant as possible. All development is open source, so we encourage you to get involved. In particular, even if you're not a C engineer, you can help mozilla.org achieve the best possible standards compliance by joining the Gecko BugAThon at http://www.mozilla.org/newlayout/bugathon.html and using your knowledge of HTML, CSS, and/or JavaScript to help analyze bug reports and simplify them into test cases to enable a fix.
  • Send an email to add your name to the Standards Now! petition drive at http://www.webstandards.org/standardsnow.html

Additional Information

Revision History of this Document

  • 21 November 00: added: notes for elementName.innerHTML, document.elementName, .jar and .cab files; sections on known bugs, common mistakes, and evangelism
  • 22 January 04: deleted broken link to old test case matrix (will try to repost them at some point)
If you'd like to reach me about something other than Netscape issues, send email to the email address:
mail2eric [at symbol] stopbadtherapy.com
(Please type the address into your mail client.)

The URL of this page is  http://www.stopbadtherapy.com/standards.shtml

top of page