transparency issues in IE again

[amidude]

I'm unable to get IE to see the Alpha fix for this image. I must be missing something.

http://www.e-centricity.net

[Tyssen]

Looks like you should be applying the filter to the image, not the container.

[Turek]

You can use this javascript instead.

function correctPNG() {
    for(var i=0; i<document.images.length; i++) {
        var img = document.images[i]
        var imgName = img.src.toUpperCase()
        if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='noscale');\"></span>"
            img.outerHTML = strNewHTML
            i = i-1
        }
    }
}

if (navigator.appName.indexOf('Microsoft') != -1){
    window.attachEvent("onload", correctPNG);
} 

[amidude]

at the risk of being bad I'm really trying to stay away from JavaScript as a solution right now. I just don't want it to be dependent on a technology that can be shut off by the user.

[stridox]

I don't think you can do it without js?

[crowden]

Why not re-comp and slice so that the butterfly is included in the header image?

[Dan Schulz]

Just so you know, any type of expression, filter, .hta/.htc file will use either JavaScript or Microsoft's "JScript" to render the effects you seek, and can be disabled by the user just as easily as actual JavaScript can. Browsers by and large don't care what the client-side scripting language is, if they can disable it, they will (when the user says to, of course).

[amidude]

Thank you for that information...so based on what I have in there now what seems to be the problem?

[Tyssen]

Thank you for that information...so based on what I have in there now what seems to be the problem?

Um, did you not read what I wrote before?

Looks like you should be applying the filter to the image, not the container.

[amidude]

Sorry about that...forgot to tell you I tried that and it didn't work. I even tried taking out the image called in the <div>. IE then displayed it fine but FF couldn't find the image. So I'm truly at a loss here. I apologize if I am missing something here. This is my first time trying to get something like this to work and whereas I have fixed a multitude of other problems I seem to have this one big one that I can't get over.

I've looked at the code over and over and I've been to stupid Microsoft's lame website and still I can't see the problem here. It should be working the way it is written...shouldn't it?

[Tyssen]

It could be the space in enabled=' true'. Try removing the space or try taking it out altogether (I've not needed it in the past).

[amidude]

Holy Monkeys!!!! That did it!!!! Thank you so much!!!! Man, and I was told over and over by this other guy that "that's how it's supposed to be". Thank you so much for your help. Man, if there's anything I can ever do for you just let me know.

Also, I really like your work on your site. Would you by chance have any pointers for me on my sites design? I'm open to any suggestions.

[Tyssen]

Would you by chance have any pointers for me on my sites design?

I think it looks pretty good as is. The only things you could maybe look at are the stripey bg in the header doesn't quite match up at about the same point either side of the main content area.

And you might want to give your nav a height in em and make the bg-color the same as the bottom of the bg-image so that when the text size is increased, the bar increases in size too.

[amidude]

Thanks so much. I will look into that.

[amidude]

Is it okay to have more than one transparent .PNG on a page? If so...what are the considerations to keep in mind prior to doing so? I'm thinking about making the background shadow a PNG as no matter what I do I can't seem to save an image that won't have that problem with the blending.

[Dan Schulz]

I do it all the time, but I use the PNG-8 encoding, rather than PNG-24.

Also, Internet Explorer 7 will be shipping this month, so you won't have to worry too much about alpha-transparency problems for much longer (assuming you tell your IE6 visitors to either upgrade or get a real browser, like Opera).

[amidude]

LOL...sweet. I'll keep that in consideration. Maybe I should add the link down at the bottom with the Firefox link. ;-)

[amidude]

tried PNG 8 and it wouldn't display in either IE or FF. Went back to PNG 24 and it shows up in FF again. IE stops displaying any graphics in the middle container if I try and make a transparent PNG for the shadow in the DIV titled "mainCtr".

This is what I tried and it failed to show the background shadow as transparent and didn't display any of the title images inside the container.

* html #butterfly {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/butterfly2.png');}
* html #butterfly img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}

* html #mainCtr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/backgrd.png');}
* html #mainCtr img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}

*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */

[Tyssen]

As far as I know, you don't need the line with opacity=0. If you're using bg-images though you do need to make IE bg-image { none } in conjuction with using the filter because otherwise you'll still be showing the unfiltered PNG.

[amidude]

IE bg-image { none }

I apologize...I'm not quite sure how to go about this.

I understand that I would use Background-image:none; but I'm totally lost where to put it. Since I am calling the image in this portion of the normal browser CSS file.

#mainCtr {
			width: 708px;
			height: 757px;		
			margin: 0 auto 0 auto;
			background: url(../imgs/backgrd.png);
			background-repeat: no-repeat;
		}