Firefox Undesired Results

[WycheGnome]

1) Script Title: AnyLink CSS Menu 2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

3) Describe problem: I have implemented AnyLink CSS Menu 2.0 on a web site I am developing and have run into a second problem I have not been able to solve.

The code for the web site is too long for posting on a forum but can be readily located by following this link - http://wycherail.co.uk/srs/calendar.html - please feel free to wander around other the pages as well.

Following post 194188 the menus - sub-menus work ok now in IE7 although the first line of the sub-menu appears one main menu item higher than expected. IE7's response to mouse movements seems quite fast as one would expect.

The sub-menus do appear at correct position in Firefox 3.0.9. But Firefox has produced the second problem. Going down the main menu list things 'hang' part way down, specifically at the 'Bookstall' button. The sub-menu appears and can be accessed. However, the menu list ceases to react to mouseover events on the lowest three menu options whilst the Bookstall sub-menu remains visible. And that sub-menu will not clear until the mouse has passed over part of the main page. There is no such problem with the other sub-menu on the Publications button.

A further issue with the Bookstall Button in Firefox is that it does not respond to the various mouse condition colour changes, nor does it respond to being clicked on.

I have reviewed the code several times and can see no difference in the construction of the Publications and Bookstall main button entries, only the legend on the button and which page is called.

Also, once a selection has been made and Firefox displayed the new page or position or, indeed no selection was made, the menu buttons (and sub-menu buttons) freeze or variably fail to respond to mouseover until a mouseclick has occurred on the #main part of the page. Clicking the Page Refresh button does not clear the problem.

Any thoughts on why Firefox should misbehave in this way??

[WycheGnome]

Since posting I have found that not making the anylinkcssmenu.init call allows the main menu buttons to operate correctly but at the loss of the popup sub-menus.
Is there something in anylinkcssmenu.js that Firefox (and Safari) doesn't like?

[jscheuer1]

To fix IE's alignment problem, use this syntax (get rid of the a tag and asign its attributes to the input):


<input rel="submenupubs" rev="lr" type="button" name="Button" class="anchorclass styleMenuMain" value="Publications" onMouseOver="this.style.color='yellow'" onMouseOut="this.style.color='red'" onMouseDown="this.style.color='lime'" onClick="jumpTo('publications.html')">

instead of:


<a href="publications.html" class="anchorclass" rel="submenupubs" rev="lr"><input type="button" name="Button" class="styleMenuMain" value="Publications" onMouseOver="this.style.color='yellow'" onMouseOut="this.style.color='red'" onMouseDown="this.style.color='lime'" onClick="jumpTo('publications.html')"></a>


Do the same thing for the bookstall button.

The issue in Firefox is one of stacking, the mouse doesn't know it is over or leaving the buttons at times. There is no apparent logic to this (it's either a browser quirk or could possibly be explained by strict interpretation of script and style directives for the elements), but we can remove all doubt by stacking the buttons high in the foreground with these styles:


input.styleMenuMain {
position:relative!important;
z-index:10000!important;
}

[WycheGnome]

Once again John, you are spot on. Those changes have cured the problem.
Well worth asking questions in this forum - you learn things. I had not sussed out from the books I hae that you could declare more than one class item in a single declaration.
Again, thank you John.