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
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
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
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
|1||Select the image which triggers the Pop-up Menu.|
|2||Open the Code inspector in Dreamweaver. The code relating to the image will be highlighted.|
|3||In the highlighted code, find the following text:
|4||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.)|
|5||Change those numbers to reflect the desired absolute location.|
|6||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:
|1||Open the page in Dreamweaver with the Pop-up Menu(s).|
|2||If you are not in Design View, choose View > Design.|
|3||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.|
|4||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.|
|5||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.|
|6||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.|
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.