The Layer Laws of Murray

The Ten Layer Laws

By Murray R. Summers. Updated September 20, 2004.
(Special thanks to Patty Ayers for the loan of her page content! See her helpful site at www.thepattysite.com)

These are not really laws, of course, but just good sound advice for keeping yourself out of trouble when using layers.

Prologue:

The term "layer" is generally accepted to be Dreamweaver/FrontPage/GoLive-speak for an absolutely positioned <div> tag. Most of the world of HTML developers may not use this nomenclature, particularly if they are not using DW or FP or GL.

You can insert a layer on your page in DW/FP/GL in four ways: a) using INSERT | Layer (or Layout Element>Layer), b) using the Layer icon on the toolbar, c) using the Insert Layer icon on the Layers panel, and d) using the Draw Layer icon on the Layers panel.

The first three of these methods produce the same results - a layer on the page, positioned at the first available (i.e., one that makes sense in HTML) location in the code, relative to your cursor location. The layer is written into the code at this location without any positioning details. It would be up to you to then move the layer around on the screen until it is placed where you need it. As you do this, the x and y coordinates are automatically written to the page by DW/FP/GL (sometimes the positioning may be written to the CSS stylesheet, while other times it may be written inline in the layer's code, e.g., <div style="position:absolute; top:140px; left:200px;">.

The last of these options allows you actually place and position your layer at the same time, since you are physically drawing it in the page location where you want it placed. However, this option also inserts the code for the layer at the cursor's location.

As you will see below, each of these options can create problems for you on your page.

Code for a layer can come in two distinct 'flavors'. The first would be how
it might be written inline:

<div id="Layer1" style="position:absolute; width:254px; height:175px; z-index:1; top:140px; left:200px; "> </div>

Layers created in this way are referred to as "Inline layers" since the positioning information is all inline (i.e., included within the <div> tag itself.

The second 'flavor' would be what is called a "fully qualified CSS layer" - where all the positioning information has been moved from the <div> tag to a linked or embedded stylesheet, and it looks something like this (when you look in the page's code between <body> and </body>):

<div id="Layer1">Blah</div>

and in the asscociated stylesheet, you will see this:

#Layer1 { position:absolute; left:224px; top:97px; width:254px; z-index:1; }

In the discussion that follows, you will see references to 'inline' and 'fully qualified' layers, and this will help you understand that distinction.

Just a note here - you can convert inline layers to CSS qualified layers by manually moving the code for the positioning information and the layer identification from the 'body' to a stylesheet.

Absolutely positioned elements are positioned with regard to the 0, 0 coordinates of their PARENT (positioned) container. While this can often be the <body> tag, it is not required to be. This means that a layer can be inside another positioned element, and will be offset from the location of THAT element, not the body tag.

The Laws:

Nested, inline layers (i.e., two or more inline layers that are 'nested' - where one layer's <div> tag appears inside that of another layer) can be big trouble in Netscape4x (NN4x). If you want to support this browser, check your page often with previews. The solution would be to make the inner layers into fully qualified CSS layers. Other browsers may also have problems with such 'nests' so preview frequently.

So - avoid nesting layers unless you know how to make fully qualified CSS layers.
It is often helpful to put text into a table in the layer. The table should be absolutely sized (in pixels and not %) and no larger than the layer, but nested tables within the main table can be set to a relative % size. This will prevent browser consternation at where to begin a 100% table in a layer positioned in the middle of the page.

So - never use percent sized tables within layers.
Never put layers in tables. Netscape 4x, and Macintosh browsers will not properly render layers in tables. If you are having positioning problems with layers but only in certain browsers, this is the first thing to look for. The solution would be to move the layer(s)'s code out of the table, and re-insert it immediately above the ending </body> tag (that's the beauty of an absolutely positioned page element - its position on the page is not dependent on its position in the code).

So - never put layers into tables (CHECK TO MAKE SURE YOU HAVEN'T DONE THIS!)
Do not expect absolutely positioned layers to remain aligned with either centered tables or centered page content as the browser window resizes. The centered content will move away from the absolutely positioned content, causing many to think that their layers are moving. This is not the case. It is possible to solve this problem but not without using more advanced CSS methods. Perhaps it would be better to say that if you are using centering content, then add layers to your page with caution.

So - mix layers and centering content with caution.
If you are having trouble with "Show/Hide"-ing layers, it is often the case that a layer has inadvertantly been given the same name as some other page element, e.g., an image. No two elements on your page should ever have the same names or the same IDs.

So - don't ever use the same name or ID more than once on a page.
Applying behaviors directly to the <div> tag of layers *is* possible, but only if you are willing to sacrifice support for v4 browsers. If you are not willing to do this, apply the behaviors to content in the layer (links or images) rather than to the layer itself.

So - don't apply behaviors/event handlers directly to a layer (i.e., to the <div> tag).
Make sure that the layer's width is large enough to hold its contents, otherwise, Mac/IE5 browsers can leave curious 'stuff' on the screen as you manipulate these undersized layers.

So - make sure your layer widths are correct when the layer contains images.
Don't assign a height to a layer if you are putting text in it. Let the browser determine the height.

So - never use layer heights. Let the browser determine these.

Putting text into layers is a dangerous proposition. A layer is 'removed from the normal flow' of the code on the page so that it can be positioned absolutely. If they are therefore not really *on* the page, layers can never push other page content aside, or down, when they expand in size. If the layer contains text, and the visitor uses their browser's text resizing capability, the text that is in layers will expand to potentially overflow other content on the page (rather than pushing it aside). To see an illustration of this, click here, and expand the text size.

So - do not put text into layers unless you are absolutely sure what will happen when that text is resized.

Use the Absolute positioning icon on the FP toolbar with considerable caution. While it is possible to position anything on the page (layers, images, tables, etc.) you really need to understand what CSS is all about to do so successfully.

So - never run with scissors, or use the positioning icon on the toolbar (until I tell you it's OK).

- Murray Summers