Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Project Seven dot com

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #138

What are some common problems, pitfalls, or issues with Layers or absolutely positioned DIVs that I should be aware of? What about tables inside layers or height property issues, or Mac problems, or nesting, or overflow?

The Answer

Prepared May. 2004 by Al Sparber, PVII

Here are some some simple guidelines to help you use work with Dreamweaver Layers (absolutely positioned DIVs) properly:

Never insert a layer unless you know precisely where its code is going to go. Dreamweaver will make sure the code is properly placed only if you use the "Draw Layer" Object. Using the Insert - Layer command from the Insert Menu can be problematic. Here's an overview of both methods:

Draw Layer

To draw a layer, click the Draw Layer icon on the Object Panel (Dreamweaver 4) or the Insert Bar (Dreamweaver MX & MX2004) and use your mouse to drag out a rectangular shape approximating the size layer you need. Dreamweaver will write the layer's source code in an appropriate area of your document's <body> region. See our infoBase article#134 for a detailed discussion.

Insert Layer

Choose Insert - Layer (or Insert-Layout Objects-Layer in MX2004). A layer will be inserted and its code placed wherever your cursor happens to be. If your cursor is inside a table, that's where your code will go and it will stay there even if you drag or otherwise move the layer about your screen in Dreamweaver's editor window. Moreover, when you use this method, Dreamweaver will not write positioning styles. Your layer will have neither top nor left properties defined. To complete Dreamweaver's job, you'll need to manually move the layer at least one pixel up and one pixel down. We recommend using this Layer creation method only for advanced users or if you are following explicit instructions in a reliable tutorial.

Common Pitfalls and Gotchas

  • Width -Dreamweaver gives the illusion that your layer expands to allow room for whatever you place inside of it. It's a dangerous illusion. If you place a 300px-wide image inside of a layer, make sure that the Layer's width is at least 300px. Forgetting to do so, could cause severe problems in modern browsers.
  • Height -Remove the height property from your layer unless you are an advanced designer and have a specific and valid purpose for assigning a height. An example of when to use height is if you are defining a clip rectangle or are using the layer's overflow properties. If you are not familiar with these terms, then never set a height attribute. A Layer that contains only text will expand vertically in the browser to accomodate all the text, even if it's a newer browser that allows users to resize text. If you have height set and the rendered text does not fit inside your defined height, the results (especially in newer browsers) can be quite messy.
  • Keep an eye on what Dreamweaver does. If you've followed the previous advisories, you could still wind up queer if you move your layer in Dreamweaver's editor window. Dreamweaver will rewrite the styles and place a height value. You'll need to be vigilant.

Tables in Layers?

You should never place a layer inside a table, but you can certainly place a table inside a layer. However, it is not required. If your design will benefit from a table inside your layer (for a 2-column setup, for instance), make sure that your table is set to a fixed width equal to the width of your layer. The most reliable way to insert text into a layer is simply to type it in.

Dreamweaver MX, MX2004 Problem (advanced)

If you are an advanced designer, you may be defining your Layers in external style sheets using ID selectors. This is very cool, very good, and very efficient. However, MX has a little quirk. Here's how it goes:

If you accidentally move or resize a layer that is defined in an external style sheet, Dreamweaver MX will actually rewrite the style sheet rule. This is very nice except for the fact that you get no warning. Since your style sheet is probably not open, Dreamweaver will make the change under the hood and your style sheet will have been changed and saved. Solutions:

  1. Try not to move your layers
  2. Keep a printed copy of your current style sheet at all times. That way, you can go back into the css file and put things back to how they were

 

Back to the questions list