AnyLink menu doesn't work with Firefox 2

[charles1]

1) Script Title: AnyLink JS Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: When hover the pointer over the anylinkmenu1 link ("Default Example"), the dropdown menu appears on the far right side of screen, instead of under the link, with Firefox 2 (version 2.0.0.2, I believe it was). When upgraded to Firefox 3.0.6, it displayed and worked fine. It works as designed in Internet Explorer and Opera.

[ddadmin]

Does this happen with the default demos on the DD script page?

[jscheuer1]

Works fine here in FF 2. Moving to the general help area.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[charles1]

MSIE is my default browser so I didn't think to check out the demo on FF 2.0.0.20. I just reinstalled FF 2.0.0.20 and the demo worked fine for me too but my webpage still doesn't. I've done some testing (removing other javascript code, etc.) and seem to have isolated it to my external CSS file, where I added the code from anylinkmenu.css. I'll assume for now that's the problem and will close this thread. Sorry I didn't think of this earlier. Appreciate your quick responses. Charles

[charles1]

Please keep this thread open. I might need some help with the CSS problem. thx

[charles1]

I isolated the conflict to the following code in my css.css file:

table#ot { /* Main table */
position: absolute;
width: 760px;
left: 50%;
margin-left: -380px;
}

The links that point to the anylinkmenus reside within this table. It's the "margin-left: -380px;" parameter above that is shifting the anylink dropdown menus to the right. I used that parameter to center my table on the page, which worked better than other things I've tried when using an absolute table width.

If I add "margin-left: -380px;" to the .anylinkmenu{ and .anylinkshadow{ classes, it fixes the problem in FF 2.0.0.20, but in MSIE the dropdowns are now shifted 380px to the left of the links. Like I said, the problem goes away with FF 3.0.6, but, it probably should be workable in 2.0.0.20 too.

The link to my webpage is www.outreachboston.com/TESTindex.htm.

Thanks.

[jscheuer1]

Change the style for that table:

table#ot { /* Main table */
  position: static;
  width: 760px;
  margin: 0 auto;
}

[charles1]

John, thank you for taking the time to look at this and for the suggestions. In the meantime, I tried surrounding my table with a <div class="od"> container, eliminated the table class, and changed my css to the following. It now works in FF 2.0.0.20 and the other browsers:

div#od { /* Main outer Div */
margin: 0px auto;
width: 760px;
}

I think I'll leave it well enough alone. However, I'm interested to know why you recommended the other Anylink code, http://www.dynamicdrive.com/dynamici...anylinkcss.htm, over the one I used?

Thanks again.

Charles

[charles1]

I hadn't seen your last post when I posted my solution. I just tried your "static" position and it works fine. Leaving it like that, removing the outer Div. Thanks.