Layers Overlapping?

Having problems with two overlapping layers

[willg825]

Hi. My site has a top header that uses a dropdown_class setup; each item, when the mouse goes over it, results in a drop-down window expanding with other options. This works fine, except on one of the pages there is a scroller type box on the main page. When the dropdown window for a certain selection is called, it still drops down, but the javascript scroller is OVER the dropdown window. The scroller is built on layers, while the drop_down class is defined in a css file. How can I specify that the dropdown class be of higher priority; that is, when the mouse goes on the button and the dropdown box shows up, it supercedes everything else and goes over it?

Thanks in advance!

-will

[Ryan8720]

Post the code.

[willg825]

Each "Option" looks like this:

<DIV id="clients" STYLE="position:absolute; visibility:hidden; left:-200">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" width="77">
<tr>
<td class="dropdown_top">
<a href="clients.php"><img src="img/button_clients_over.jpg" name="button_clients" border="0"></a>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" width="190">
<tr class="dropdown_menu">
<td class="border_left" width="91" height="1">
<img src="img/speck.gif" width="1" height="1">
</td>
<td class="border_top_right" width="140" height="1">
<img src="img/speck.gif" width="1" height="1">
</td>
</tr>
<tr>
<td class="dropdown_bottom" colspan="2">
<img src="img/speck.gif" width="3"><img src="img/small_arrow.jpg"> <a href="#">Client Testimonials (Coming Soon)</a><br>
<img src="img/speck.gif" width="3"><img src="img/small_arrow.jpg"> <a href="#">Client List (Coming Soon)</a><br>

</td>
</tr>
</table>
</DIV>

the scroller has this div:
<div id="placeholder" style="position:relative; width:175px; height:125px;"> </div>

is there anything else I should post? Let me know if anyone has any suggestions...

[SuzyUK]

try giving the "clients" div a higher z-index than the "placeholder" div..

aside: I'd remove the "_" underscores from the class names or change them to "-" hyphens..

Suzy

[willg825]

Hi Suzy. I set the z-index of placeholder to 1:

<div id="placeholder" style="position:relative; width:175px; height:125px; z-index:1">

and that of clients to 2:

<DIV id="clients" STYLE="position:absolute; visibility:hidden; left:-200; z-index:2">

It still shows the scroller as in front of everything else.

I appreciate your help - do you have any other suggestions?

Thanks!

-will

[willg825]

Anyone with any ideas? its a javascript scroller on the bottom, and a dropdown_class on top, and I want the dropdown class to go OVER the scroller when the user highlights it.. right now the scroller supercedes that dropdown..

thanks in advance--
will

[Purple Martin]

Q1. Scrollers often use an extra container div that's clipped. Is the "placeholder" div that you posted inside a container div that has a higher z-index?

Q2. iframes are always on top because they are windows in their own right. Does the "placeholder" div contain an iframe that scrolls?

Q3. Does it help if you shuffle where the divs are in the code so that the "clients" div is after the "placeholder" div?

[willg825]

Q1. Scrollers often use an extra container div that's clipped. Is the "placeholder" div that you posted inside a container div that has a higher z-index?

--No, the placeholder div is separate and independent of other divs..

Q2. iframes are always on top because they are windows in their own right. Does the "placeholder" div contain an iframe that scrolls?

I'm not sure I understand what an iframe is. How would I be able to tell if the placeholder div has one? what should I look for?

Q3. Does it help if you shuffle where the divs are in the code so that the "clients" div is after the "placeholder" div?

I'm not sure - but it wouldnt work anyway because the divs determine the layout of the page, so shuffling would mean the scroller would be in a different spot, when it needs to be below the dropdown class..

this is baffling me. I appreciate the response--let me know about the iframe thing or if you have any other suggestions... thanks

will

[Purple Martin]

You'd know if you had an iframe because you'd see an iframe tag in your code. Do a search and read up on them - they're interesting beasts.

Im msg #:3 your "clients" div is absolutely positioned. This should mean that it doesn't matter where it sits in the HTML. You can move it to wherever you like in the code, and specify a height from the top of the page, for example:
<div id="clients" STYLE="position:absolute; visibility:hidden; left:-200px; top:150px;">

[willg825]

Hey there. No iframes in the javascript; and I tried repositioning the divs and it still overlaps.

Someone told me that there are certain controls (like a scroller) that just cant get overlapped. Is that true? Can a dropdown never overlap a certain type of control? If thats the case, then I guess I'll have to reorganize the data a bit...

thanks again for everyones help

-will

[Purple Martin]

FYI iframes are HTML tags, not JavaScript. But you obviously don't have an iframe anyway, you'd have noticed it by now.

[willg825]

Yeah.. no iframes in the js or regular html files. Thanks though..