Specifying the Banner's Position
Positioning a Dynamic HTML element in a standard HTML document is never easy. We'll position the banner with the use of a simple image (GIF, JPEG, animated GIF, or any other format):
<IMG SRC="blank.gif" NAME="holdspace" ID="holdspace" WIDTH="400" HEIGHT="21" STYLE="visibility:hidden; position:relative;">
Notice that the
ID attributes should have the same value. The
NAME is used to reference the image in Navigator 4.0x, whereas the
ID serves Internet Explorer 4.0x. By assigning the same value to these attributes, it is easy to create a cross-browser reference of the image in the script.
HEIGHT definitions specify the dimensions of the image. Since the banner is placed on top of the image, these attributes determine the dimensions of the banner. The image actually saves space on the page for the banner that loads when the page has finished doing so.
visibility is set to
hidden in order to hide the image. Navigator 4.0x doesn't accept a
visibility property for images, so this specification only affects Internet Explorer 4.0x. If the user has disabled style sheets, it does not affect the image. But because the script doesn't rely on style sheets, the banner is placed on top of the image (so it is hidden in any case). If you do not want the user to see the image until the banner is loaded, simply use a transparent one.
position is set to
relative to identify the element as a positioned one. This ensures that the parent element is also the one from which
offsetTop are measured. Without this property, Internet Explorer 4.0x would measure the
offsetTop properties with respect to the element's direct parent, which could be a
TD element, for example. Since style sheets cannot be disabled in Internet Explorer 4.0x, this
STYLE definition is always evaluated. Note that Navigator 4.0x's undocumented
y properties of an image are not influenced by the image's parent element. They are always measured from the left and top edges of the page.
Another way to add a positioned (
absolute) element to a standard page is to nest it within another element that has a
position value of
relative. However, Internet Explorer 4.0x's
clip property doesn't function properly on relative elements. Peter Belesis, author of Webreference's Dynamic HTML Lab, suggested a workaround for this problem. Instead of nesting an absolute element within a relative one, simply nest an absolute element within another absolute element that is nested within a relative element. Navigator 4.0x doesn't require this workaround, because its clipping works fine with relative elements as well.
Created: February 10, 1998
Revised: February 10, 1998