Text under a translucent png in IE7/8 full opacity

Question

The images here illustrate the issue pretty well:

The problem:

What it should look like:

But in a nutshell I have a png with alpha transparency displaying over the top of the rest of the page. In IE7 and IE8 the text below the png image has full opacity where as the image below the png image correctly does not.

What should I do to fix this?

Answer 1

Your problem is not the transparency of the text under the image.

IE is rendering the transparent image BEHIND the text, so your problem is Z-Index related. You could try setting position:relative to the parent dom element of your menu.