Cross-Browser Layers, Part One
by Budi Kurniawan
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
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.
Layers are possible thanks to the Dynamic HTML specifications in version
4 of Netscape Navigator and Internet Explorer. Unfortunately, as usual,
Microsoft and Netscape worked faster than the standard body could
produce standards for DHMTL. As a result, the resulting DHTML object
models for both browsers could not be more different. In fact, when you
want something to mimic a cross-browser layer, you need two sets of
code, one for each browser. By detecting the type of browser, you can
force a browser to run the appropriate code.
Layers only work in Netscape Navigator version 4 and above or Internet
Explorer version 4 and above. Users with older browsers should
still be able to surf the layer-less version of your site comfortably.
In fact, there shouldn't be any noticeable difference.
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.
<div> tag can have the following attributes:
style attributes are
of importance in creating the layer effect.
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
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 properties and values of the style attribute:
position -- absolute | relative
left -- pixels relative to the left of the containing element
top -- pixels relative to the top of the containing element
visibility -- visible | hidden | inherit
z-index -- layer position in stack (integer)
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">
For example, Listing 1 shows the code for a layer, where there is a form
with two input elements.
Listing 1: An example of a layer
<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>
Your layer does not need a
<body> tag because a layer is
always in the
<div> tag could
appear at the top of the page, right after the
or near the end of the file before the closing
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
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!
is a senior J2EE architect and author.
Comments on this article
1 to 5 of 5
1 to 5 of 5