Transparent Background Issues (especially in IE6)

Hi,

I'm building a website for a friend of mine. Basically, there's a section with a transparent grey PNG used for the background (by setting the background image URL in the default CSS sheet). This is all fine until I test it on IE6. I got through the initial prolem of IE6's hideous lack of PNG transparency by using this code in the IE6 CSS sheet:

* html img,
* html div,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(t his.pngSet?this.pngSet=truethis.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progidXImageTransform.Microsoft.AlphaImageLoade r(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif")this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().repl ace('url("','').replace('")',''),
this.runtimeStyle.filter = "progidXImageTransform.Microsoft.AlphaImageLoade r(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Then I put the background in the HTML page with this code:

<!--[if IE 6]>
<div id="transblock" style="background-image: url(images/blackbgrnd.png);"></div>
<![endif]-->

Only problem is that now the background seems to double up and place itself above the text and links of the rest of the page., effectivly leaving anything in that section untouchable by the user.

I've zipped the site and added it here (http://www.webdesignerforum.co.uk/in...pe=post&id=709) if anyone could have a look. If anyone's got any thoughts about this, I'd be incredibly greatful to hear them.

Cheers
Al

Attached Files

abi.zip (1.64 MB, 7 views)

Scrap the expression code and use IE PNG Fix instead.