Z-index issue? js + css

[TeviH]

Hello,

I am struggling with this and would appreciate any help anyone can give me. I am trying to get a css drop-down menu system to work with this javascript slideshow script I found on the web. Everything works great in Firefox, but in IE, there seems to be a weird issue with the drop down menus falling behind the slideshow.

IE uses a JS to allow the drop downs to work, while FF can just use css (ul:hover doesn't work in IE), and I think that has something to do with it.

I tried adding "z-index" to my CSS to get the div and images from the slideshow to be in the back, and move the ul from the drop downs to the front, but it's not working.

Can anyone tell me what's wrong and how to fix it?

Thanks!

link: http://abuse-recovery-and-marriage-counseling.com/new/index4.html

 

[TeviH]

what's with the no replies?

:td:

 

[GoDesign]

css's and JS's are still very unpredictable in cross browser tests,esp IE, which is surprising really....

Have you tried adding a few <BR>'s before this code:

<!-- call up our JS page here -->

to push the slideshow a little further down the page, so its not overlapped with your top-menu.

you can also do it the better way by searching for:

<td width="193" align="left" valign="top">

and changing it to:

<td width="193" align="left" valign="center">

 

[DylanButler]

I suggest using Stu Nichol's all CSS method on http://cssplay.com . The layers issue with Flash (so I assume it is actually an ActiveX issue) and drop-downs is a known issue on mac IE. However, I believe using the forementioned method will solve the issue. I will check tomorrow at the office to see if that's what our fix is and let you know.

 

[TeviH]

@godesign: I don't want to push the js too far down the page - adding line breaks is not the solution, but thanks for the suggestion.

@dylanbutler: all-css method of doing what? Drop down menus? There will always be an issue in IE doing drop down menus because IE only support :hover on links, and no other elements. (btw, that link is co.uk, not .com)

Thanks guys. Any other recommendations?

 

[DylanButler]

These are the ones I am talking about. http://cssplay.co.uk/menus/flyout2.html
It is possible to obtain the drop-downs without the tables/conditioning, but you can't do the on hover state background staying effect (see link) which looks so much better so we went with it.

 

[TeviH]

That's an interesting way to do the drop downs. I'll check it out.. I like how it stays hilighted (though the tables are not kind of awkward...)

The layers thing - Im not using flash; that's JavaScript! I would assume that using stu nichols' drop downs would still pose problems with the script. Why wouldn't it?

 

[DylanButler]

Have you tried positioning the box containing the javascript absolutely and in conjunction with a z-index?