Hello,

I am half way through work on a site for a local school and when I upgraded to Firefox 3 yesterday I noticed my site had a problem.

I have a navigation bar along the top of the site which has dropdown menus. Beneath this is a rotating image script. When you mouse over the nav bar in FF3 the dropdown menu appears behind the rotating image.

This only happens in FF3. It worked fine in FF2 and in IE7.

The site in question is http://www.colaisteiosaef.ie/wip

I would appreciate any help on this issue.

FF3 is behaving correctly. The solution is to set the z-index on the div with an id="master0" (which holds the rotating images). The z-index on the rotating images is overriding the one set on the dropdown menu.

I strongly suggest you learn a new method of laying out pages, or stop using whatever application you are using to generate this page. You don't even have an external stylesheet, and are instead relying on inline styles smattered throughout the document, which goes against every concept of contemporary web design there is.

Also, the nested tables are just horrid, and most of what you are doing with Javascript can be done with simple CSS. This is not 1998.

***EDIT***
Also, every div with an id="menuLayer0", "menuLayer1", "menuLayer2", etc, need their z-index changed from 1 to 2

Hi wayfarer07,

Thank you for the update. I will try this tomorrow and let you know how I get on.

I am aware of the out-dated code and that CSS is the way to go. I have just ordered "CSS: The Missing Manual" by David McFarland on Amazon. Know of any other good starting points for a complete CSS novice.