By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,261 Members | 1,658 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,261 IT Pros & Developers. It's quick & easy.

Changing z-index and opacity in IE

P: 15
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(opacity=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
Dec 31 '08 #1
Share this Question
Share on Google+
5 Replies


P: 15
Ah, should have said, using IE7.
Dec 31 '08 #2

RamananKalirajan
100+
P: 607
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(opacity=2) must be used. If possible please post the source code of the file.

Regards
Ramanan Kalirajan
Jan 2 '09 #3

acoder
Expert Mod 15k+
P: 16,027
I've fixed the link, so it points to the page.

Yes, instead of changing the z-index, set style.display.
Jan 2 '09 #4

P: 15
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.
Jan 3 '09 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 6 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.