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

IE doesn't "do" .png alpha transparency

http://www.webmaster-talk.com/html-f...tml#post404167

Exactly, and that's the real bummer with IE 6 and lower. I had this same problem a while back with one client who refused to step into the new world of IE 7 (they had IE 5). I was forced to do the 'same thing' by using .gif's instead. The only problem here is that the quality of the graphic drops significantly.

Good luck,
The Lion.

Your solution lies in killing Bill Gates and destroying Microsoft. Until someone does that your going to need to use an alpha filter to get IE to do transparencies, assuming you want to use PNG

In the head of the webpage. This directs the page if the browser is IE to use an additional style sheet:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="trans_fix_ie.css" media="screen"/>
<![endif]-->

In the style sheet to fix the transparency issues:

  
.trans {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/nav02.png', sizingMethod='scale'); }

This should fix your transparency problems.

I use Jquery plug-in that fix the transparency problem with IE6. I dont remember the name, but works in a project that i worked. Searcj Jquery plug-ins.
Maybe this plugin works like the BlackWater solution.