Home/ Questions/Q 9245653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:18:47+00:00

I’m developing a ‘one page’ website for a customer. The website displays as I

  • 0

I’m developing a ‘one page’ website for a customer.
The website displays as I want it in most browsers however I’m experiencing problems in a specific combination of Internet Explorer 8 installed on Windows XP.

Because of a combination of requirements from the customer and the design of the graphical designer different elements are placed on top of eachother and need to fade in or out based on navigation.

All works fine in browsers like IE9&10 (Including IE8 document property in developer tools), Chrome and also IE8 on Win2K8 server.

However in IE8 it seems like the transparency of invisible elements is inherited by ‘would be’ visible siblings at the same position.

I’ve searched for different solutions and have tried different things like:

opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-filter: alpha(opacity=0);

also with an additional but mostly unneccesary:

display: block;

or

zoom: 1;

But none of the above does the trick.

Has anyone experienced, or solved, this problem before.
Or is fading multiple elements at the same position in IE8 just not the right way to go.

See this fiddle for my intended functionality:
http://jsfiddle.net/6HZGw/11/

PS. I tried to post an image of what exactly was my problem but since I’ve just registered this is not possible as a spam prevention measure.

So here is the link to the problem:
http://img338.imageshack.us/img338/4458/ie8f.png

And the link to the expected view:
http://img255.imageshack.us/img255/8391/chromeothers.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IE8’s opacity filter is really awful. It kinda works some of the time, but it’s riddled with bugs and gotchas. jQuery makes it slightly less painful, but even then it’s easy to get caught out by one of the quirks.

    I don’t have IE8 or XP available to test it on right now, but I have been down this path myself and suffered similar results, particularly when dealing with multiple elements, and even more particularly when those elements are a mix of text and graphics.

    As I say, I can’t try it out for myself right now, but my guess is that you’ve hit one of those problems that just can’t be resolved. So I would suggest looking for alternative solutions.

    In our case, after a lot of work, we ended up completely abandoning the idea of fading the elements in and out because of this, and switched to a tactic of sliding them out from behind other elements. The effect was similar enough that the customer was happy, and it worked in all browsers.

    • 0