I'm making a new site which is to have, among other things, drop-down menus and a nice slideshow on a number of pages. I'm accomplishing those things with some canned scripts which work well, except my slideshow covers up my menus when they drop down. Does anyone have a tip about how to control overlapping javascript features?

I.

Are you going to show us the site, or do we just have to guess? I can tell you right now that the answer is probably a CSS issue, not specific to the javascript, although you may have to see how those two elements are interacting to find an acceptable solution.

Actually, there is no site yet...I want to work out the kinks before I really get into building the thing, as it's ultimately going to have more than 100 pages.

I'm using CSS to specify text, etc. As for structuring the thing, I've laid it out using (gasp! the horror!) tables. I spent two weeks trying to understand how to structure a site in a simple, clear way using CSS. There seems to be quite a bit of confusion out there about this, and, as a result, everyone seems to be using canned templates, because otherwise it's just too darned hard, what with the need for "Holly Hacks" and so on. With a few <tr>'s and <td>'s I can easily and quickly lay my pages out precisely and predictably. I simply don't have time for endless fiddling.

Having said that, if there's a way to put a javascript feature into a "container" and give that a CSS z-index, that might do the trick, but I haven't been able to find out how to do that...or if it's actually possible.

Ideas, anyone?

I.

As wayfarer07 says, it's almost certainly a CSS issue. You'll need to find out which element is overlapping with which other one. I'd suggest using Firebug (for Firefox) to do this as it has an inspect button that allows you to click on the offending bit directly. Once you have their classes or IDs, add / edit a rule or two in your CSS for those elements and you should be good to go. You shouldn't need to put anything in a container - editing the elements' own styles should be fine.

The two most likely CSS culprits are the position and (as mentioned) z-index properties. An element that is positioned relative or absolute will appear above one that is not and, as you said, a higher z-index puts things on top as well. (Juicy details here and here - last one recommended if you want to see a 7 level nested list in action. )

If you want to do it with jscript load your drop downs last, also check out Microsoft expression statement for css.

If I really knew what I was doing, I would have noticed that my problem isn't with javascript, it's with a java applet. The offending slideshow is an applet, and according to this...
http://www.milonic.com/mfa/2003-Sept...ng-banner.html
...applets just cover everything else up and that's that. Pffft!

Maybe I need a non-applet slideshow.

Is it true, what they say about applets?

I.

Applets, and Flash also, believe they are superior, so they sit on top of everything with no regard for the order of things. I don't ever use applets, and allow flash onto my pages as sparingly as possible.

I can see why.

I think what the link says (that applets are drawn on top of everything) is true, though admittedly I haven't done any work with applets since Netscape 4... You can get stuff to show through Flash by using the transparent parameter and z-index (see here for a walkthrough).

On another note, I suspect I'd resent having to wait 20s for my browser to load Java and unfreeze just to see your slideshow. There are plenty of JavaScript (which load instantly) and Flash (which load almost instantly) solutions available. They're almost certainly much more modern too - I don't remember the last time I saw a Java applet on a web page in a non-academic context.

Edit: Oops, too slow at replying...

Oops, too slow at replying...

Not at all. You're right that there's a delay as images load, which I can't say I was thrilled with. I'm testing a javascript slideshow now which doesn't look too bad, though the fade is not as smooth as I'd like. Oh, and it makes all the cell padding on the page disappear. Yeah.

The only website I can think of that uses Java applets frequently is this one: http://www.pogo.com ... they actually manage to do a great job with them. These types of games, however, are one of the few practical applications for applets on the web today. They could still be done with javascript, though not quite on the performance level of applets.

Now I get it...part of it, anyway.
"cellPadding is overruled by any CSS padding declaration."
There was, in fact, one of those, set for zero, so I took it out. Now that's back to normal.

The method I'm trying now is this one...
http://sonspring.com/journal/slideshow-alternative
...which looks really good in my old IE6 (used for testing) but doesn't look so smooth in Firefox.

There seems to be quite a bit of confusion out there about this,

No there isn't, the only 'confusion' is people not willing to take the time to actually LEARN what they need to do.

and, as a result, everyone seems to be using canned templates, because otherwise it's just too darned hard,

It's not THAT hard, but you do need to put forth some effort to learn, just like anything that's new to you.

what with the need for "Holly Hacks" and so on.

The Holly Hack is only necessary for certain bugs in IE6 and below and, done correctly, it's not all that hard to figure out where you need such a hack - and why.

It's not THAT hard

You know, I did take the time to read this series...
http://kilianvalkhof.com/2008/css-xh...ioning-part-1/
...which, right up front, says "Without a doubt, positioning, or the layout, is the hardest part of CSS." Yeah. I found it to be incomprehensible.

Back in the day when table layout was de rigueur, nobody ever talked about "the dreaded three-column layout" because, well, nobody dreaded it. It was E-Z. Now it's not.

http://fredbrunel.com/journal/2006/0...-are-not-evil/

My biggest headache is coding (I almost said "designing," which it isn't) for old, non-compliant browsers. CSS sure ain't gonna help me with that. If it's not part of the solution...

I.

Having said that, if there's a way to put a javascript feature into a "container" and give that a CSS z-index, that might do the trick, but I haven't been able to find out how to do that...or if it's actually possible.

Yes, it is possible.