Cross-Browser Layers, Part One

You know there are no such things as cross-browser layers, because the layer object only exists in a Netscape Navigator version 4 or later browser. However, Internet Explorer is rich enough to present something of its own that resembles layers. This article discusses problems with writing code for layers in both browsers and presents you some solutions.

A layer is just another page of HTML tags. Unlike the traditional HTML page, however, a layer can be placed on top of another page and positioned exactly at the coordinate of your choice in the browser window. You can have any number of layers, and by changing the z-order of those layers, you can determine which layer will be displayed. When programming layers, these are the issues you need to address.

The issues in the second point disappear if you don't mind having three versions of each page and you are using a processing engine such as ASP or JSP that can detect the user browser type when the HTTP request comes. But, you know, using ASP or JSP to output plain HTML is much slower because the page will be processed by the ASP engine or JSP container before being sent as an HTTP response. Moreover, having three versions of each page (one for Netscape Navigator version 4 and above, one for IE 4 and above, and one for older browsers) presents awful maintenance issues. A minor modification to the page will require you to work on three different files.

In parts one and two of this article, you'll see how to use layers to make your web site more attractive. The most popular application of layers is for creating submenus that show up when you move the mouse pointer over a menu. However, before you start with the code, you should familiarize yourself with the <div> tag, a tag that plays a critical role when you work with layers.

Creating a page division as a layer

Before you start working with layers, you should be familiar with the <div> tag. The <div>tag is used to define an area of the page, or document division. Anything between the opening and the closing tag is referred to as a single item.

Introduced in HTML 3.2 standard, the <div> tag does not allocate any particular style of structure to the text, it just allocates an area. The <div> tag is a block-level element, it can be used to group other block-level elements, but it can't be used within paragraph elements.

The <div> tag can have the following attributes: align, class, dir, id, lang, style and title. The id and style attributes are of importance in creating the layer effect.

The id attribute gives a layer a unique identifier that is useful in the programming. The style attribute controls the position, visibility, and the z-order of a page division. The properties and possible values of the style attribute are given in the table below. These properties are part of the Cascading Style Sheet -- Positioning (CSS-P), an addition to the CSS1 syntax for specifying an exact location on the page where an HTML element is to appear.

The visibility property is the most important for cross-browser layer control because with it you can show and hide a layer. In Netscape Navigator 4 and above, the visibility value has a different value for visible: show. To create a layer, just write normal HTML tags and put them inside the <div>tags using special attributes.

<div id="MyLayer" style="LEFT:0px; position:absolute; TOP:0px; visibility:hidden; z-index:0">

</div>

For example, Listing 1 shows the code for a layer, where there is a form with two input elements.

<div id="layer1" style="left:0px; position:absolute; top:0px; visibility:hidden; z-index:0">

<form method="POST" action="verify.asp">

<input type=text name="userName">

<br /><input type=text name="password">

<br /><input type=submit>

</div>

Your layer does not need a <body> tag because a layer is always in the <body>. The <div> tag could appear at the top of the page, right after the <body> tag, or near the end of the file before the closing </body> tag. You can have as many layers as you want, as long as they all have unique IDs. In each tag, you can put anything legal for HTML body, even though you probably want to use a table for alignment and other graphical effects.

Browsers prior to version 4 don't know how to render <div>. Fortunately, they are happy to accept the <div> tags without complaint. As you'll see later, this is a boon for us.

In part two next week, I'll show you how to display and hide these layers. Until then, happy scripting!

Layers were considered a very hot innovation a couple years ago when they first began to surface. Do you think they're here to stay, or will they eventually be replaced by another technology?
You must be logged in to the O'Reilly Network to post a talkback.

Showing messages 1 through 9 of 9.

yes
2003-07-31 21:50:15 anonymous2 [Reply | View]

u can not call technology a technology if it does not change.
layers will obiviously be replaced with the smarter things.

Articles like these are frustrating...
2001-11-18 15:36:03 darknerd [Reply | View]
I am a complete newbie to the world of DHTML, and man, can I tell you it's a nightmare. A lot of code out there is for NS4 and IE4, and the whole notion of cross-browser is a complete hoax.

I would be really useful if the author brushed up on W3C DOM and started adding articles with this in mind for several reasons:
1. the code will be alot cleaner as in many cases the MS All DOM can be ignored, as W3C ID DOM is supported.
2. Newbies getting involved these days will all too often come across W3C.
3. Older browsers are multi-lingual retarded. Later browsers support Unicode more effectively. This leaves little choice for those wanted to create multi-lingual (namely Chinese, Japanese, Korean) pages with DHTML, but to use newer browsers with adequate Unicode support. These newer browsers (IE5+, NS6+, Mozilla) support
  Unicode and W3C standards.
4. There are accessibility features with newer browsers due to W3C standards. This can help those that are blind for example, browse the net.
5. Using object oriented Java Scripting, one can easily wrap older hoky code into a W3C DOM-like class, thus using a single DOM. :-). This makes the code look very clean, and only one logic is used (no forks), but yet maintains true bugwards compatibility

Author's response
2001-06-01 18:21:17 budi [Reply | View]

In client-side programming there are always two things: W3C recommendations and market facts.
Both, as we have been witnessing, don't go hand in hand. Cross browser compability is not yet a thing of
the present. As new standards come in, it often takes years to replace the old ones entirely.
That's why a large number of Web sites still support primitive browsers that
only render HTML 3.2, years after HTML 4.0 was released. The Microsoft ASP.NET,
for instance, will still support HTML 3.2 when it is released some time
in the future. When you need to use a feature not recognized by some browsers,
all you need to do is let the code degrade gracefully in these browsers, as the
article shows.

Netscape 6 does not support layers. That is unfortunate because it means
there is no provision for backward compatibility. But, are layers dead?
Let's see what the market says. According to one survey
(http://www.cen.uiuc.edu/bstats/latest.html, on 31 May 2001), Netscape
are used by 17% of users and 2.4% of them use version
6, giving it a 0.408% of the market share, more than half a year after it was released.
Old Grandpa Netscape 3, on the other hand,
is still used by 3.9% of Netscape users, years after it was supposed to be dead. The users of
Netscape 4.x is 92.7% of all Netscape users, or 15.76% of Internet users.
The percentage of Netscape 4.x, IE 4.x and above (those browsers that understand
"layers") is 93.76%, or 98.76% if counting other compatible browsers.

Layers are a nice technology that can be used for submenus, absolute positioning,
animation, etc. Killing them prematurely is a total waste.

Author's response - short extra note
2001-06-07 12:02:10 stignygaard [Reply | View]

I just read this part one one more time, and got in dought...

> Layers are a nice technology that
> can be used for submenus, absolute
> positioning, animation, etc.
> Killing them prematurely is a total
> waste.

You are aware of Netscape 6 IS supporting layers, but not the NS4.x way of layers ? NS6 support layers the W3C-way. And so does does IE5+.

You can't use the <LAYER> tag in NS4.x, and you can't use document.layers, but you CAN use <DIV> and you CAN use document.getElementById.

Stig

Author's response - short extra note
2001-06-08 06:38:57 budi [Reply | View]

Hi Stig,
I am sure there are a lot of users who, like myself, find your comments inspiring. All that you said are right. Netscape 6 has its own way for layers. However, if you code layers for Netscape 6, Netscape 4.x users will feel abandoned. I am sure the newer "layer" will eventually be the de facto standard. How long it will take to replace the old technology entirely is for us to wait and see.
Thanks,
budi

Author's response - short extra note
2001-11-18 15:44:33 darknerd [Reply | View]

Budi,

I think you are making it sound way more complicated that it really is. Stig added other code snippets in article 2 to show just how simple it is to add W3C support.

I don't quite understand your aversion to adding support for W3C DOM. There is no new added learning curve.

By not added W3C support, just frustrates us newbies out there, who want to make their code simply work, not just on older incapable browsers, but also on newer exciting developments from IE6, NS6, Mozilla, and Opera5.

- Joaquin

Author's response
2001-06-07 11:51:30 stignygaard [Reply | View]

Actually I agree very much in what you're saying: You can't ignore NS4.x and IE4 just yet. But you didn't mention the W3C standard at all in first part of your serie ! In my opinion you have to code for three platforms if you're coding DHTML today: IE4, NS4.x and the other more or less W3C compliant browsers (IE5.x, IE6, NS6, Opera 5, Konqueror 2.x,...). Yes IE5.x is still compatible with the IE4 model, and IE6 will problably be too, and the marketshare of NS6, Opera and Konqueror ain't that big. But I think it is important to think about tommorow too when developing today. First of all your DHTML code gets obsolete sooner or later; Both MS and Netscape/Mozilla seems to take the W3C standards very seriously now, and the small upcoming browsers like Opera and Konqueror do too.
Besides its a matter of principle to me, to support a open standard that prevents the WWW to turn into a properiatary one-browser network...

Actually the W3C standard isn't that hard to learn. Take your IE4 code and do a search-and-replace on document.all replacing it with document.GetElementById, and you're already pretty far ;-)

Even if you choose not do any W3C code in your article series, I think you at least have to mention the subject. Learning people DHTML today without telling about the W3C standard is a bad idea in my opinion.

Stig

Oh no - stop this article serie !
2001-05-30 15:45:38 stignygaard [Reply | View]

I got a bad feeling about this article serie. It doesn't look like the author is into the new W3C standards supported (more or less) by Netscape 6, IE5+, Opera 4+ and Konqueror (possible more browsers). The document.layers (NS4.x) and document.all (IE4) DHTML models are obsolete now !!!

Take a look at sites like:

http://sites.netscape.net/ekrockhome/standards.html
http://www.xs4all.nl/~ppk/js/

The NS4.x-DOM is not even supported in Netscape 6 or other Mozilla/Gecko-based browsers !

Layers, as such, are already gone
2001-05-30 12:39:16 twilcoxen [Reply | View]

Layers, of the NS variety anyway, are already kaput, yes? They are removed from NN 6, in a controversial and rather painful move.

This really makes for another requirement for browser detection, though a good div solution should work for both IE 4/5+ and NN 6+ I guess....