The Perils of Layers

Home > Build > Design > Articles > Page View

by Aaron West

With the growing popularity and browser support of CSS, layers are becoming a common design technique. Let's face it, they're easy. While they might not be as easy to hand code, they are far easier to manage and there are several editors out there that use a 'drag and drop' approach to implementing them. So why not use them?

That's what I'm here to tell you.

Layers don't offer the same control that tabular layouts do. There is no way (without some heavy scripting) to specify that a layer be pushed down when the content or font size infringes upon it. This means that if some other HTML element is manipulated by the user, the layer is the victim. Let me share a couple of examples:

If you use Internet Explorer, you might have noticed the Text Size feature in the View menu. Users have the ability to change the size for ALL pages based on their viewing comfort. I've known many people that have this set to 'Largest' by default due to poor eyesight. This breaks the design 9 times out of 10.

A common mistake I see is people that use Layers with a centered design. Since layer position has to be absolute (in pixels) from the edges of a document, this means that the center point of a browser window varies due to resolution. What might look perfect at 800 x 600 will look off center at 1024 x 768 and just plain weird at larger resolutions. If you decide to use layers, I beg you to use a left aligned design.

Also there might come a time where you need to divide the design into a header and a footer. This can be a nightmare when layers are used, especially when authored by a WYSIWYG program. HTML is coded in a sequence. The browsers render elements in the order in which they are coded. Layers follow no logic whatsoever. The order in which they are rendered depends on the positioning defined in the document. This makes finding the 'middle' extremely difficult.

The alternative is tables. While they might seem difficult to the novice at first, they are really quite easy. There are three primary tags to remember, <TABLE> - container tag that defines the table, <TR> - table row, and <TD> - table cell. Table layouts might take more forethought, but are more usable and easier to maintain in the future.

You can learn tables from our HTML Tutorial.

So when should you use layers? In my opinion layers should only be used with DHTML animations or other scripting functions. If you choose to use them in a general design, I urge you to test on several platforms, several browsers, with several font sizes.