We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Deamweaver using Fireworks

jodyreid
jodyreid asked
on
Medium Priority
174 Views
Last Modified: 2010-04-25
I am setting up a web page that has a drop down menu made with fireworks. The menu works great but when i put the menu in a layer it changes is function. The menu works like this  
Menu               ****           But with layers it works like this       ****       Menu
        menu-1                                                                                        
        menu-2
        menu-3
                                                                                                                         menu-1
                                                                                                                         menu-2
                                                                                                                         menu-3
Why does it drop down so far when i use layers.
Thank you.
 
Comment
Watch Question

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Hi jodyreid,

Without the source code, I can only guess but my guess is that the layer is defined with a position (either relative or absolute) and fireworks menu also a position definition that is screwing things up.
jodyreidIT Manager

Author

Commented:
<cfquery name="AprCalData" datasource="Calendar">
SELECT *
FROM April2005</cfquery>

<html><head>
<!-- TemplateParam name="OptionalRegion1" type="boolean" value="true" -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style6 {
      font-size: 14px;
      color: #115542;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript"
>function mmLoadMenus() {
  if (window.mm_menu_0405094730_0) return;
  window.mm_menu_0405094730_0 = new Menu("root",150,24,"Times New Roman, Times, serif",18,"#ffff33","#ff0000","#59a48d","#59a48d","center","middle",3,0,100,-5,7,true,true,true,0,false,true);
  mm_menu_0405094730_0.addMenuItem("January&nbsp;2005","window.open('http://localhost:8500/Calendar/2005/Jan2005/January2005.cfm', '_self');");
  mm_menu_0405094730_0.addMenuItem("February&nbsp;2005","location='http://localhost:8500/Calendar/2005/Feb2005/February2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("March&nbsp;2005","location='http://localhost:8500/Calendar/2005/Mar2005/March2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("April&nbsp;2005","location='http://localhost:8500/Calendar/2005/Apr2005/April2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("May&nbsp;2005","location='http://localhost:8500/Calendar/2005/May2005/May2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("June&nbsp;2005","location='http://localhost:8500/Calendar/2005/June2005/June2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("July&nbsp;2005","location='http://localhost:8500/Calendar/2005/July2005/July2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("August&nbsp;2005","location='http://localhost:8500/Calendar/2005/Aug2005/August2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("September&nbsp;2005","location='http://localhost:8500/Calendar/2005/Sept2005/September2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("October&nbsp;2005","location='http://localhost:8500/Calendar/2005/Oct2005/October2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("November&nbsp;2005","location='http://localhost:8500/Calendar/2005/Nov2005/November2005.cfm'");
  mm_menu_0405094730_0.addMenuItem("December&nbsp;2005","location='http://localhost:8500/Calendar/2005/Dec2005/December2005.cfm'");
   mm_menu_0405094730_0.hideOnMouseOut=true;
   mm_menu_0405094730_0.menuBorder=0;
   mm_menu_0405094730_0.menuLiteBgColor='#00ffff';
   mm_menu_0405094730_0.menuBorderBgColor='#59a48d';
   mm_menu_0405094730_0.bgColor='#ffffff';

  window.mm_menu_0405144601_0 = new Menu("root",75,24,"Times New Roman, Times, serif",18,"#ffff33","#ff0000","#59a48d","#59a48d","left","middle",3,0,100,-5,7,true,true,true,0,false,true);
  mm_menu_0405144601_0.addMenuItem("Januray","window.open('http://localhost:8500/Calendar/2005/Jan2005/January2005.cfm', '_parent');");
   mm_menu_0405144601_0.hideOnMouseOut=true;
   mm_menu_0405144601_0.menuBorder=0;
   mm_menu_0405144601_0.menuLiteBgColor='#00ffff';
   mm_menu_0405144601_0.menuBorderBgColor='#59a48d';
   mm_menu_0405144601_0.bgColor='#ffffff';

  mm_menu_0405144601_0.writeMenus();
} // mmLoadMenus()<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script language="JavaScript1.2" src="2005/mm_menu.js"></script>
</head><META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META name="description" content=>
<META name="keywords" content=>
<title>default: April 2005</title> <style type="text/css">

<!--

/* CSS for calendar C:\Program Files\iCal v3.10 Web Calendar\AprData\default.cal  */
body.bodyclass{ font-weight:normal; font-size:12px;color:#000000;background-color:#CDF2D7;}
.tdcalendartitle{ font-weight:normal; font-size:x-large; font-family:Arial;color:yellow;background-color:darkgreen;text-align:center;}
.calendarmonthyear{ font-weight:bold; font-size:x-large; font-family:Arial;color:black;background-color:#CDF2D7;text-align:center;}
.tdcalendarheader{ font-weight:normal;color:black;background-color:navajowhite;}
.tdcalendarfooter{ font-weight:normal;color:#000000;background-color:#BBFFBB;}
.tdlistymtitle{ font-weight:normal; font-size:20px; font-family:Arial;color:#000000;background-color:#CDF2D7;}
A.tdlistymtitle_link{ font-size:20px; text-decoration:underline;color:#000000;}
.navigatebar_bgcolor{background-color:#97A68D;}
.navigatebar_labels{ font-weight:bold; font-size:x-small; font-family:Arial;color:black;background-color:#97A68D;}
.navigatebar_year{ font-weight:normal; font-size:12px; font-family:Arial;color:black;text-align:center;background-color:#97A68D;}
A.navigatebar_year_link{ font-weight:normal; text-decoration:underline; font-size:12px; font-family:Arial;color:black;background-color:#97A68D;}
.navigatebar_monthweek{ font-weight:normal; font-size:12px; font-family:Arial;color:black;text-align:center;background-color:#97A68D;}
.navigatebar_monthweek_selected{ font-weight:bold; font-size:12px; font-family:Arial;color:black;text-align:center;background-color:#CCCCCC;}
A.navigatebar_monthweek_link{ font-weight:normal; font-size:12px; text-decoration:underline; font-family:Arial;color:black;background-color:#97A68D;}
.displaybar_bgcolorleft{text-align:left;background-color:#97A68D;}
.displaybar_bgcolorright{text-align:right;background-color:#97A68D;}
.displaybar_bgcolor{
      text-align:left;
      background-color:#97A68D;
      color: #FFFF66;
}
.displaybar_textelement{ font-weight:normal; font-size:12px; font-family:Arial;color:black;background-color:#97A68D;text-align:center;white-space:nowrap;}
.displaybar_selected{ font-weight:bold; font-size:12px; font-family:Arial;color:black;background-color:#CCCCCC;text-align:center;}
A.displaybar_textelement_link{ font-weight:normal; font-size:12px; text-decoration:underline;white-space:nowrap; font-family:Arial;color:black;background-color:#97A68D;}
select.navbarselect{color:black;background-color:#CCCCCC;}
.weekdayheadings{ font-weight:normal; font-size:medium; font-family:Arial;color:#FFFFFF;background-color:#0D0D0D;text-align:center;}
.prevnextmonth{ font-weight:normal; font-size:medium; font-family:Arial;color:#FFFFFF;background-color:#0D0D0D;text-align:center;}
A.prevnextmonth_link{ font-size:medium; text-decoration:underline;color:#FFFFFF;background-color:#0D0D0D;}
A.subscribelink{ font-weight:normal; text-decoration:underline; font-size:medium; font-family:Arial;color:black;text-align:left;}
A.outlookaddlink{ font-weight:normal; text-decoration:underline; font-size:medium; font-family:Arial;color:black;text-align:left;}
.offmonthbg{background-color:#336600;text-align:left;}
.blockdefaultmonthbg{background-color:#FFFF66;text-align:left;}
.listdefaultmonthbg{background-color:#BBBBBB;text-align:left;vertical-align:top;}
.timeplanmonthbg{background-color:#BBBBBB;text-align:left;vertical-align:top;}
.timeplanmonthbgshadow{background-color:#BBBBBB;text-align:left;vertical-align:top; border-top: outset; border-right: outset; border-bottom: outset; border-left: outset; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 1px; }
.dayofmonth{background-color:#CDF2D7;color:#0D0D0D;text-align:left;}
A.dayofmonth_link{ font-weight:normal; font-size:medium; text-decoration:underline; font-family:Arial;color:#000000;background-color:#CDF2D7;text-align:left;}
A.listdatelink{ font-weight:normal; text-decoration:underline; font-size:medium; font-family:Arial;color:#000000;background-color:#BBBBBB;text-align:left;}
A.listeventlink{ font-weight:normal;text-align:left; text-decoration:underline; font-size:12px; font-family:Arial;color:#0D0D0D;background-color:#BBBBBB;}
.todaysdate{background-color:limegreen;text-align:left;}
A.todaysdate_link{ font-weight:normal; text-decoration:underline; font-size:medium; font-family:Arial;color:#FFFFFF;background-color:limegreen;text-align:left;}
.calendarevent{ font-weight:normal; font-size:12px; font-family:Arial; font-style:normal;color:#000000;}
.listcalendarevent{ font-weight:normal; font-size:12px; font-family:Arial; font-style:normal;color:#000000;}
.fonttime{ font-weight:normal; font-style:normal; font-size:xx-small; font-family:Arial;color:#000000;}
A.eventlink{ font-weight:normal;text-align:left; text-decoration:underline; font-size:12px; font-family:Arial;color:#0D0D0D;background-color:#BBBBBB;}
A.offeventlink{ font-weight:normal;text-align:left; text-decoration:underline; font-size:12px; font-family:Arial;color:#0D0D0D;background-color:#8DA694;}
.weeknumber{ font-weight:normal; font-style:normal; font-size:12px; font-family:Arial;color:#000000;text-align:left;}
.listshortdaytext{ font-weight:normal; font-style:normal; font-size:small; font-family:Arial;color:#000000;background-color:#CDF2D7;text-align:center;vertical-align:top;}
.listlabeltext{ font-weight:normal; font-style:normal; font-size:xx-small; font-family:Arial;color:#000000;}
.quickfilter_left{ font-weight:bold; font-style:normal; font-size:small; font-family:Verdana, Arial, Helvetica, sans-serif;color:white;background-color:black;text-align:left;}
.quickfilter_right{ font-weight:bold; font-style:normal; font-size:small; font-family:Verdana, Arial, Helvetica, sans-serif;color:white;background-color:black;text-align:right;}
A.quickfilter_link{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; text-decoration:underline;color:white;}
.blockyearfullmonth{ font-weight:normal; font-style:normal; font-size:small; font-family:Verdana, Arial, Helvetica, sans-serif;color:black;background-color:#888888;text-align:center;}
A.blockyearfullmonthlink{ font-weight:normal; text-decoration:underline; font-style:normal; font-size:small; font-family:Verdana, Arial, Helvetica, sans-serif;color:black;background-color:#888888;}
.blockyearmonthtitle{background-color:#0D0D0D;text-align:center;}
A.blockyearmonthtitlelink{ font-weight:bold; font-style:normal; text-decoration:underline; font-size:small; font-family:Verdana, Arial, Helvetica, sans-serif;color:#FFFFFF;background-color:#0D0D0D;text-align:center;}
.blockyearasterisk{ font-weight:normal; font-style:normal; font-size:xx-small;text-align:center;}
.blockyearweekday{ font-weight:normal; font-style:normal; font-size:small; font-family:Verdana, Arial, Helvetica, sans-serif;color:#000000;background-color:#CDF2D7;text-align:center;}
.blockyeardaynum{background-color:#BBBBBB;text-align:center;}
A.blockyeardaynumlink{ font-weight:normal; font-style:normal; text-decoration:underline; font-size:small; font-family:Verdana, Arial, Helvetica, sans-serif;color:#000000;background-color:#BBBBBB;text-align:center;}
.blockyearweeknum{background-color:#CDF2D7;text-align:center;}
A.blockyearweeknumlink{ font-weight:normal; font-style:italic; text-decoration:underline; font-size:x-small; font-family:Verdana, Arial, Helvetica, sans-serif;color:#000000;background-color:#CDF2D7;text-align:center;}
.plannerweek{ font-weight:normal; font-style:normal; font-size:medium; font-family:Arial;background-color:#CDF2D7;text-align:left;}
A.plannerweek_link{ font-weight:normal; text-decoration:underline;color:#000000;background-color:#CDF2D7;text-align:left;}
.popbody{background-color:navajowhite;}
.popuptitle{ font-weight:normal; font-style:normal; font-size:medium; font-family:Arial;color:#0000FF;text-align:left;}
.popupdata{ font-weight:normal; font-style:normal; font-size:small; font-family:Arial;color:#0000FF;text-align:left;}
.popupdate{ font-weight:bold; font-style:normal; font-size:x-small;text-align:left;}
.style4 {background-color: #FFFF66; text-align: left; color: #FF0000; }
.style7 {color: #1D04FB}
-->

</style>


</head>
<body class=bodyclass><center>
<div id="Layer1" style="position:absolute; width:75%; height:350px; z-index:4; left: 322px; top: 138px;"></div>
<div id="Layer3" style="position:absolute; width:323px; height:345px; z-index:5; left: 1px; top: 93px;">  
  <div align="left"><a href="#" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0405094730_0,177,30,null,'Menu');">
    <script language="JavaScript1.2">mmLoadMenus();</script>
    </a>
    <table border="0" cellpadding="0" cellspacing="0" width="150">
      <!-- fwtable fwsrc="Menu1.png" fwbase="Menu1.gif" fwstyle="Dreamweaver" fwdocid = "1790405285" fwnested="0" -->
      <tr>
        <td><img src="2005/spacer.gif" width="4" height="1" border="0" alt=""></td>
        <td><img src="2005/spacer.gif" width="138" height="1" border="0" alt=""></td>
        <td><img src="2005/spacer.gif" width="8" height="1" border="0" alt=""></td>
        <td><img src="2005/spacer.gif" width="1" height="1" border="0" alt=""></td>
      </tr>
      <tr>
        <td colspan="3"><img name="Menu1_r1_c1" src="2005/Menu1_r1_c1.gif" width="150" height="5" border="0" alt=""></td>
        <td><img src="2005/spacer.gif" width="1" height="5" border="0" alt=""></td>
      </tr>
      <tr>
        <td rowspan="2"><img name="Menu1_r2_c1" src="2005/Menu1_r2_c1.gif" width="4" height="245" border="0" alt=""></td>
        <td><a href="#" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0405144601_0,139,27,null,'Menu1_r2_c2');"><img name="Menu1_r2_c2" src="2005/Menu1_r2_c2.gif" width="138" height="29" border="0" alt=""></a></td>
        <td rowspan="2"><img name="Menu1_r2_c3" src="2005/Menu1_r2_c3.gif" width="8" height="245" border="0" alt=""></td>
        <td><img src="2005/spacer.gif" width="1" height="29" border="0" alt=""></td>
      </tr>
      <tr>
        <td><img name="Menu1_r3_c2" src="2005/Menu1_r3_c2.gif" width="138" height="216" border="0" alt=""></td>
        <td><img src="2005/spacer.gif" width="1" height="216" border="0" alt=""></td>
      </tr>
    </table>
</div>
</div>
<div id="Layer2" style="position:absolute; width:100%; height:133px; z-index:2; left: 1px; top: 2px;">
  <table  width="100%" height="93"  class=tblcalendartitle>
    <tr>
      <td height="63" colspan=17 class=tdcalendartitle ><div align="center"> Event Calendar </div></td>
    </tr>
  </table>
  <table  width="98%"  class=tblcalendarheader>
  </table>
  <center>
  </center>
  <center>
  </center>

  <center>
</center>
</div>
</body><head><META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"></head></html>
This is the code I am using for the layers and menu.
I do not know if this will help solve my problem.
Thank you.
Jody
jodyreidIT Manager

Author

Commented:
Can anyone help with this problem. This is the second time i have put this problem in and still can not get an answer. It would help alot if someone could take a look at this problem.
Thank you.
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Hi jodyreid,

Sorry about the delay.  I had some RL issues to take care off.

As I noted above, you are using an absolutely positioned layer to hold things and that can have funny effects on nested div tags within that layer.  Also, run your page through the W3 validator (validator.w3.org).   You have a number of errors that could cause browsers to be reverting to quirks mode and that can screw up the display of the elements too.

Finally, can you post a link to the page so I can preview it with images?
jodyreidIT Manager

Author

Commented:
Thank you. This i think will solve my problem, what do i use instead of the absolutely position for best results.
Thank you.
Don't talk to me.
CERTIFIED EXPERT
Commented:
Use float and clear to control how the elements appear.  It looks like you are already starting down this path from yout source code...you just need to clean things up a bit more.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Thanks for the points.  Good luck!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.