THREE APPROACHES TO CROSS-BROWSER DHTML MARKUP
When naming elements and declaring them to be positioned, there are
three techniques you can use in your HTML markup: using a single named
DIV or SPAN on both browsers, dynamically generating a named DIV or
SPAN on Internet Explorer 4.0 and a LAYER tag on Navigator 4.0, and
wrapping a named DIV or SPAN in a LAYER tag of the same name. The
first approach should be your default, but sometimes the second or
third approach simplifies the development of complex applications, so
developers should be aware of all three techniques and use whichever
is appropriate for a particular application.
Why DIV or SPAN instead of Other Elements?
DIV or SPAN are not the only elements which can be named and
positioned. Other elements such as <P> can also be used in the
same way. However, if the purpose of an element is to enclose content
which is to be positioned, using DIV or SPAN helps to make that
purpose explicit to anyone who is reading the markup, so use these two
elements as your default choice for enclosing positioned content.
It is good HTML style to use DIV to enclose a section of one or
more block elements (for example, <DIV ID="foo"><H1>A
Header</H1><P>Some text.</P></DIV>) and to use SPAN to enclose content without block
elements, such as text, inline elements, and/or images (for example,
<SPAN ID="foo">Some <B>bold text</B> and an image
<IMG SRC="/old?u=http%3A%2F%2Fdeveloper.iplanet.com%2Fdocs%2Ftechnote%2Fdynhtml%2Fcsspapi%2Fbaz.gif&y=1999"></SPAN>). This complies with the two elements' intended uses in the
HTML specification. However, the two elements are functionally
equivalent and interchangeable in most situations. One exception: DIVs
used within a TABLE may be displayed with a trailing line break; SPANs
in a TABLE do not trigger a trailing line break.
Using a Single Named DIV or SPAN on Both Browsers
Since Internet Explorer 4.0 lacks support for the LAYER tag, the
simplest way to create an element which is positioned in both browsers
is to use a positioned, named DIV or SPAN, a technique which is
supported by both browsers. In the HTML page's HEAD, you place a CSS
style sheet that declares the element to be positioned:
|
<![CDATA[
<STYLE TYPE="text/css">
#foo { position: absolute }
</STYLE>
]]>
|
...and in the BODY, you place the named element itself:
|
<![CDATA[
<DIV ID="foo">
<H1>A header</H1>
<P>Some text</P>
</DIV>
]]>
|
Dynamically Generating a Named DIV or SPAN on Internet Explorer 4.0 and a LAYER Tag on Navigator 4.0
For some applications, dynamically generating markup which is
optimized for each browser will simplify development. Mike Hall's
freely downloadable Cross-Browser DHTML API takes this approach,
dynamically generating a positioned DIV on Internet Explorer 4.0 and a
LAYER tag on Navigator 4.0.
The cross-browser DHTML API included in this TechNote includes a
function called genElt which generates a positioned, named DIV on
Internet Explorer 4.0 and a named LAYER or ILAYER on Navigator
4.0. Function genElt returns this markup as a string; the string can
be written out by a document.write() statement, perhaps after being
concatenated with other strings or enclosed in additional markup. A
related function called writeElt generates the markup and writes it
out in a single step. The only difference between genElt and writeElt
is that genElt returns the markup as a string, whereas writeElt writes
it out to the document window.
Functions genElt and writeElt have the same argument list,
reproduced here for your reference:
