Changing the location of a Pop-up Menu exported from Fireworks

IssueWhen previewing in a browser, a Pop-up Menu exported from Fireworks 4 and inserted into an HTML document does not appear in the expected location. The availability of a new extension on the Dreamweaver Exchange allows more stable alignment of pop-up menus in Dreamweaver. See Note below.

There are several reasons why a Pop-up Menu might display in an unexpected location on the previewing browser page, including:

Changed location of triggering device

The location of the triggering device (a hot spot, linked image or button) for a Pop-up Menu on the Dreamweaver page is not the same location that the triggering device occupied on the canvas in Fireworks.

Browser margins

Page margins have not been set to "0" in Dreamweaver.

Shifting location of triggering device

The triggering device is not absolutely positioned in Dreamweaver.

An explanation of each reason and a corresponding solution are offered below.

Reason 1: absolute positioning relative to the top left corner of the Web page
When Fireworks exports a file containing Pop-up Menus, it creates a JavaScript file (fw_menu.js) which generates CSS layers. The JavaScript code assigns an absolute location to each Pop-up Menu CSS layer. This is intentional so that the Pop-up Menus and sub-menus will always appear in the same absolute location in relation to each other. However, this causes the Pop-up Menus to be in the wrong location if the devices triggering these Pop-up Menus are placed in positions on the page which are different than their positions on the canvas in Fireworks.

Changing location illustration
The following is a simple example which illustrates how changing the location of a triggering device between the Fireworks canvas and the Dreamweaver page "dislocates" a Pop-up Menu.

The Fireworks canvas
A developer creates a single button on the canvas in Fireworks. The button is placed in the upper right hand corner of the canvas. The developer positions the Pop-up Menu on the canvas so that it overlays the button only slightly on the button's lower right-hand corner. View Example 1 to see how this button and the Pop-up Menu are positioned relative to each other and the upper left hand corner of the Fireworks canvas.

Different positioning on the Dreamweaver page
The developer inserts the Fireworks HTML (Insert > Interactive Images > Fireworks HTML) for the button and JavaScript into a table in Dreamweaver. However, the button is positioned to the right and down by a 100 pixels in both directions. Although the position of the button relative to the upper left-hand corner of the page has changed from Fireworks to Dreamweaver, the position of the Pop-up Menu (which are housed in CSS Layers) has not. See Example 2 for an example of how this button appears in Dreamweaver, as well as how the button and the Pop-up Menu display in a browser. For comparison purposes, consider Example 3 which demonstrates that if the button is located in Dreamweaver in the same position it occupied on the canvas in Fireworks, the Pop-up Menu displays as expected.

Solution 1: resetting the positioning of a Pop-up Menu in the HTML Code
The position of a Pop-up Menu on the Dreamweaver page can be modified by changing its X,Y coordinates in the HTML code. The X,Y coordinates are relative to the top left corner of the page. These coordinates are absolute;the Pop-up Menu will not move even if other items on the page do move (as with page resizing). The image below shows the X,Y coordinates for a button created in Fireworks, as well as the resulting HTML code for these coordinates in Dreamweaver:

Modifying the HTML will involve finding the current X,Y coordinates of your Pop-up Menu and then changing the coordinates to appear in a location closer to the triggering device or nearer to the location anticipated in Fireworks.

Changing a Pop-up Menu's location in the Dreamweaver HTML code


Select the image which triggers the Pop-up Menu.


Open the Code inspector in Dreamweaver. The code relating to the image will be highlighted.


In the highlighted code, find the following text:



The last two numbers correspond to the absolute X,Y location of the Pop-up Menu from the top left corner of the page. (The X,Y coordinates of the Pop-up menu in the example above is 100,10.)


Change those numbers to reflect the desired absolute location.


Users of Internet Explorer 5.0 for Macintosh (only) must take an extra step to change the location of their Pop-up Menus:

Once the X,Y location has been changed in the onMouseOver call above, the following tag which appears just above the Fireworks 4 table must be moved to the first line under the <body> tag in the HTML file:

<Script Language="JavaScript1.2">fwLoadMenus();</script>

Note: The above script is the call to the "fwLoadMenus()" JavaScript function, which is located in head tag of the document. The "fwLoadMenus()" function controls the Pop-up Menus. A call to a JavaScript function basically triggers the JavaScript activity in the browser. In Internet Explorer 5.0 for the Macintosh the actual placement of the call influences how the browser calculates the X,Y coordinates. If the call is placed directly below the body tag (rather than just above the Fireworks table) the X,Y coordinates will relate to the upper left-hand corner of the browser window. Moving this code is not necessary for any browser other than Internet Explorer 5.0 for the Macintosh.

Approximating the location where a Pop-up should display


Open the page in Dreamweaver with the Pop-up Menu(s).


If you are not in Design View, choose View > Design.


If the rulers are not already displayed on the page, choose View > Rulers > Show. Also, pixels should be your mode of measurement (View > Rulers > Pixels). If the origin is not 0,0, choose View > Rulers > Reset Origin.


Notice that as you move your cursor around the Dreamweaver page, small dotted lines appear in the rulers. These dotted lines indicate the cursor's current X,Y coordinates. The dotted line in the top ruler shows the X coordinate; the dotted line in the ruler on the left side indicates the Y coordinate.


Place your cursor in the position that you would like the Pop-up Menu to appear on the Dreamweaver page. Note the location of the dotted line in the top ruler for the X coordinate, as well as the location of the dotted line in the left ruler for the Y coordinate. Write down your intended X,Y coordinates.


Follow the above steps to change the location of the Pop-up Menu in the Dreamweaver HTML. You may need to again change the X,Y coordinates by a few pixels to get the exact absolute location you want.

Note: The Fireworks Insert Pop-up Menu command automatically writes the Dreamweaver Add/Remove Netscape Resize Fix command to the external JavaScript code to prevent problems with browser resizing in Netscape 4.x. It will not be necessary to add this command once the Fireworks HTML table has been inserted into Dreamweaver, even if you inserted the Fireworks HTML into a layer. 

Reason 2: browser margins
If the Fireworks HTML table has been inserted into another HTML document, the page margins of the document may be artificially holding the table away from the top left corner. The Pop-up Menus will then seem to be positioned slightly above and to the left of the triggering devices.

Solution 2: resetting page margins
Set the page margins to "0" in Dreamweaver. 

Reason 3: triggering device location shifts on Web page
Because a Pop-up Menu is absolutely positioned relative to the top left corner of the page, the triggering device will also have to be absolutely positioned. In other words, the triggering device cannot be located or aligned such that its position will change if the browser window resizes.

Solution 3: stabilizing the location of the triggering devices
Use Left or Default alignment for a Pop-up Menu's triggering device (and any table or layer in which the triggering device is embedded). Generally, placing a Fireworks HTML table with Pop-up Menus inside a Center-aligned table will not allow the Pop-up Menus to consistently appear as expected.

Adobe logo

Sign in to your account