IE8 Opacity bug on large content pages?

Our entire site uses a common "progress" panel to dim the background while processing.  The "fade" panel covers the entire width and height of the scrollable page.

Works great in both IE8 and Firefox, with one exception.   In IE8, there appears to be a limit on the page content, causing the fade panel to lose it's opacity and turn solid.

I found this out 2 ways:

1) I took a dynamic page that shows transaction history and it works fine until the page gets too long with lots of transactions.

2) I took a page with lots of panels, images and text and started chipping away some panels and\or images.  Eventually the opacity started working again.  I then reset and went back in to start removing other things (not removed the first time) and eventually it started working yet again.  Meaning, there was nothing specific with the coding or layout causing the problem.  It was simply how much content was on the page.

Again, works great in FF, but this seems to be a bug with IE8.

Anyone know of a solution or if this is a bug?

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Can you post a link? Code?
michelle0Author Commented:

Then click the TRADING POST menu item.  (you will see that the fade background is solid)

Then, in the Trading post page, click HOME menu (the fade div works fine)

The home page (/info/exc) is an example of what is happening.  If I cut out about 20% of anything on the page, then the fade works right again.  

Again, this fadediv is used throughout the entire site (and accounting site) and works great unless a page is too large.   As I said, I know it isn't a code issue because It works fine on a dynamic page (e.g. using a repeater) until the data on the page gets to be too much.

The opacity styling is:

div.FadeDiv, .modalBackground
	width: 100%;
	z-index: 995;
	left: 0px;
	position: absolute;
	top: 0px;
	background-color: #D3D3D3;
	-ms-filter: "(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;

Open in new window

michelle0Author Commented:

Then click the TRADING POST menu item.  (you will see that the fade background is solid)

Then, in the Trading post page, click the Trading Post AGAIN (the fade div works fine)
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

michelle0Author Commented:
While you're at it, check out the Featured Section titles in the Trading Post.

I have been playing with them ALL day trying to get them looking right, but in IE8 they continue to look choppy.  If I enlarge them and make bold, then it gets way worse!

ClearType is on in my IE8 browser, but to no avail.

Thanks again,
michelle0Author Commented:
I tested further and found this bug was only in IE 8 Standards Mode (which we have our meta tags set to on the site).

So, my solution was to create a quick JS detector to test if IE8 Standards Browsing Mode (not IE 7 Compat Mode or non-ie browsers).  If so, then I simply do not show the opacity fade div for certain pages.

If you or anyone else can confirm this as a bug, let me know.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
michelle0Author Commented:
FYI, still looking to award points if someone can figure out how to make the opacity FULL page div work on very large pages in IE 8 Standards Mode.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.