Changing z-index and opacity in IE

[altonator]

Hello fellow coders. I have a little problem with a script that changes the opacity and z-index of two elements. It's basically 2 elements on top of each other and when you click a link it fades the top element away to reveal the one underneath. So some opacity changing and z-index swapping going on.

It works fine in Firefox and Safari, but as usual IE insists on screwing it up.

Now I've used the IE filter:alpha(op acity=xx) nonsense, but it still doesn't seem to work. I think the z-index changing is working, but the opacity stuff isn't.

The page in question is here:

http://www.ffredjones.co.uk/main.php?page=gallery

And the script is here:

http://www.ffredjones.co.uk/gallery_switcher.js

And light that anyone can shed on the matter will be greatly appreciated.
Cheers and happy new year.
Altonator

[altonator]

Ah, should have said, using IE7.

[RamananKalirajan]

Sorry man, both the links are opening the JS file only. I cant find the original file. I suggest u can go for style.display if u want to hide and show things. But if u want a fade effect then filter:alpha(op acity=2) must be used. If possible please post the source code of the file.

Regards
Ramanan Kalirajan

[acoder]

I've fixed the link, so it points to the page.

Yes, instead of changing the z-index, set style.display.

[altonator]

Hi, unfortunately changing style.display is a bit useless, because in order to get one to fade in/out over the other you need to have them both displaying and be able to change the stacking order (ie swap which one is on top).

I could fade the first one to nothing, then change that one to display='none' and change the 2nd one to display='block' , and then fade the second one in. But that's not really the effect that I'm after. I need to be able to switch the z-indexes over.

Any ideas?
Cheers.

[acoder]

IE has problems with both z-index and opacity. For z-index, check the position of the elements. If you have relatively positioned elements, it creates a new stacking order. For example, see Bug Report: Explorer z-index bug. Opacity will only work if IE has layout - On having layout — the concept of hasLayout in IE/Win.