Hello everyone.

I'm going to try this as a general question first. In the event you guys do need to see the page, then I'll put up the info as needed.

My issue is this:

The site I am making uses a javascript slideshow. I need to have CSS div boxes overlay over it (the header and menu bar).

In IE, I am not having any issues. Doesn't matter what I try - no issues at all. Putting the divs after the java (which is also in a css div) in the code, using "z-index" to put it on top, float, etc, doesn't matter - WORKS.

What is NOT working is FireFox and all the rest. What's truly interesting is if I use z-index, the header does show up on top....for a few minutes, and then the javascript takes over the top position. What the?

Some examples:

.header {
float: left;
width: 716px;
height: 150px;
background-color: transparent;
background-image: url("images/header.jpg");
position: absolute;
z-index:100;
}

#mainimage {
position: absolute;
}



Or:

.header {
float: left;
width: 716px;
height: 150px;
background-color: transparent;
background-image: url("images/header.jpg");
position: absolute;
}

#mainimage {
position: absolute;
}

With HTML:

<div id="mainimage">
<script type="text/javascript">
new fadeshow(fadeimages, 650, 825, 0, 2000, 0)
</script>
</div>
<div class="header"></div>


Again, IE - no issues. But I can't seem to find ANY method to get the dang header on the TOP of the java for any other browser.

I am very much pulling out my hair.

If you can assist: