TechNote (Archived)

Layer locations are displaced when the Netscape 4.x Browser Window is resized

Issue

---

The layers do not remain in the same position, appear to be changed in size, or disappear completely when the Netscape browser window is resized. The layers go back to their original positions when the page is reloaded.

Reason

---

This is a known issue in Netscape Navigator 4.x browsers that occurs after the browser window has been resized. For more information about this Netscape issue check out the following links:

CSS Pointers Group

DHTML diner on the webreference.com site

Solution

---

Design the site for Netscape and Internet Explorer browsers.

When designing sites for both Internet Explorer and Netscape, you can minimize the issue of layers repositioning upon browser window resize by:

	Avoid the use of nested layers.
	Place all elements in a fixed pixel size table in the layer.
	Add custom JavaScript that automatically reloads the page when the browser window is resized.

Note:Until browsers have complete support for layers, we recommend using layers while designing a Web site. When the design is complete, convert the layers to tables for the final site. See the Converting Layers to Tables section of this TechNote for instructions.

Site designed for Netscape Only
If the site is targeted for Netscape Users use the ILayer tag. See the Using Netscape layer tag section for a step by step process.

Note:This solution is not supported by Internet Explorer.

Limited solution for Netscape and Internet Explorer browsers
Use a fixed window size. This solution has limited applications. For more information and step by step instructions see the Fixed Window section of this TechNote.

Removing nested layers
To remove nested layers do the following:

1	Choose View> Invisible Elements.
2	Choose Window> Layers to check for nested layers. A nested layer structure is identified by either a "+" or "-" in front of the parent layer name in the Layer palette.
3	In the Document window, select the yellow "C" invisible icon for the nested layer. Drag the icon out of the parent layer into the main document.
	The child layer becomes its own parent layer when viewed in the Layer palette.
4	Repeat the steps above until all nested layers are now single individual layers. Place elements within single layers as needed.

Fixed table
Put all elements (text and images) into a fixed width table set to the same width as the layer. If the layer does not contain elements, you will need to insert a table into the layer. This table should also be the same width as the layer.

To convert an existing table to a fixed width do the following:

1	Select the table in the layer.
2	Choose Modify> Table > Convert Widths to Pixels.

To insert a table in a layer do the following:

1	Click inside the layer to position the cursor inside the layer.
2	Choose Insert> Table.
3	Choose the desired Row, Column, Cell Padding, and Border selections.
4	Choose Pixels from the Width pop-up menu. Note:The pixel width of the layer can be typed into the Width field for the table in the Property inspector.
5	Instead of typing the pixel width in the Width field, expand the width of the table to match the width of the layer by positioning the cursor in the middle of the table row until the cursor changes to a double headed arrow. Drag the mouse to the right to expand the table row to match the width of the layer.

JavaScript resize fix
There is a JavaScript function that causes the Netscape browser window to automatically resize.

In Dreamweaver 2, the JavaScript fix is a custom object downloaded and installed into Dreamweaver and inserted into a page with layers as follows:

	Download the free installer that adds the Netscape Layer Fix Object (This object is no longer available on the Macromedia site).
	Choose Window> Object.
	Select Insert Layer Resize Fix.

In Dreamweaver 3, the JavaScript fix is a simple menu selection made within Dreamweaver as follows:

	Choose Commands > Add/Remove Netscape Resize Fix.
	To have the javascript fix automatically entered on every page with layers, choose Edit > Preferences > Layers and select Add Resize Fix when Inserting Layer.

Note:This script is designed to help alleviate this Netscape browser issue in most situations, but it does not guarantee that it will fix this browser problem.

Converting Layers to Tables
To convert layers to tables do the following:

1	Change all nested layers into individual layers.
2	If any overlapping layers exist, move the layers on the page so they do not overlap.
3	Arrange the layers so that the content exists within the visible page area.
4	Choose Modify> Layout > Convert Layers to Table. Note:All the layers on the page convert to one table.

Converting layers into a table format will solve the Netscape browser refresh issue, allowing both 3.x and 4.x browsers to view the pages correctly.

Using the Netscape layer tag
If you want to create a page that will be viewed only by Netscape 4.x browsers, you can use either the <LAYER> or the<ILAYER> tag to define your layers.

To convert layer tag types, do the following:

1	Select the Yellow C icon for the layer in the Document window.
2	Choose Modify> Selection Properties in the Property inspector.
3	Select either LAYER or ILAYER from the Tag pop-up menu. This step changes the tag to the <LAYER> or <ILAYER> tag types for use with Netscape 4.x browsers only.
	Note:Internet Explorer does not support these two layer tag types.

Fixed Window
When the content of your page is in a non-resizable browser window, this Netscape browser issue cannot be triggered. You can use Dreamweaver's "Open Browser Window" behavior to load your page with layers into a new, non-resizable browser window.

The "Open Browser Window" behavior can be used with on the "onLoad" event of the <BODY> tag or on the "onClick" event of an image or text hyperlink. The example below uses the onLoad event.

Refer to the Dreamweaver 2 Help to find out more about the "Open Browser Window" behavior.

To use a fixed window size with the onLoad event do the following:

1	Click at the beginning of the page to insert the cursor.
2	Choose Window>Behaviors.
3	Press the plus button and choose Open Browser Window.
4	Type in the URL of the HTML document to load.
5	Type the desired width and height dimensions in the Window Width and Window Height fields. This will set the fixed Window size.
6	Select the appropriate attributes but do not select Scrollbars as Needed or Resize Handles. These settings allow the Window to be resized.
7	The Behavior inspector now shows the onLoad behavior with the Open Browser Window event.
8	Test the file in the browser.

Note:When making a fixed size Window, remember the content of the page will need to fit within the width and height parameters you set.

Additional information
Take a look at these TechNotes for other layers-related issues:

Style is not an object (TechNote 13709)

Expected Semicolon (TechNote 13715)

Search Support

---