Transparent Png Help from AListApart.com

[jpolo9]

Argh does anyone have any idea how to use the AlphaImageLoader to set a CSS png background to work in IE? I've been reading up on it at http://www.alistapart.com/articles/pngopacity/

But i can't seem to get everything to work, any ideas? The site im almost finished with is http://norcaldesigns.sytes.net/norcal/norcal/defaultPNG.asp

you can see in IE the pngs are defunct while in FireFox it works great. Thanks,
-Jesse

[jpolo9]

:( no one has used this or can sort out the JS?

[_Aerospace_Eng_]

I would actually do this with conditional comments, this works on most of the newer browsers.
Put this in between the head tags of your page
<link rel="stylesheet" href="templates/homePNG.css" type="text/css">
<![if IE]>
<link rel="stylesheet" href="templates/iepng.css" type="text/css">
<![endif]>

attached is a css file called iepng.css, put it in your templates directory, you could also write these style sheets onto the page using javascript but I prefer the conditional comments method, go here (http://www.quirksmode.org/css/condcom.html) for more info.

EDIT:Better way of arranging stylesheets brought to attention by harbinger

[harbingerOTV]

Ditto with _Aero but you shouldn't need the <![if !IE]> part. Just load the noraml css first and then the <!if IE> part after that. Then you only need to change the parts of the CSS that you are using the alpha image loader for in the IE CSS. Since it's read from top down Ie will se the first, put everything where it needs to be and then read the IE CSS and load the alpha pngs in place .

[jpolo9]

ahh thanks for the help, unfortunately the iePNG.css doesn't seem to work right. The background image doesn't show up at all. Any ideas? thanks,
-Jesse

oh the site im trying it on is at http://norcaldesigns.sytes.net/norcal/norcal

[_Aerospace_Eng_]

Okay sorry I wasn't sure of the directory that you were starting your page at, the css file was pointing to images/bgt.png not templates/images/bgt.png please try the new attachment. I advise that you use the code I provided above to avoid using js, and to ensure that the proper background is displayed in the other browsers that do support png opacity.

[jpolo9]

Eureka U've done it! I had the css set to home.css and it worked great in IE but with the conditional code IE just uses homePNG.css, it doesn't load home.css, am i using that wrong?

Yea i realized the background image wasn't referenced correctly in your first version but what i didn't notice is that in the header you had templates/images/iepng.css instead of template/images/..I shoulda been able to see that, ill chalk it up to lack of sleep :S

thanks,
-Jesse

[_Aerospace_Eng_]

After some testing, it appears that you need to have both the if IE and if not IE
<![if IE]>
<link rel="stylesheet" href="homeie.css" type="text/css" />
<![endif]>
<![if !IE]>
<link rel="stylesheet" href="home.css" type="text/css" />
<![endif]>
Also the background image seemed to not appear when it was a relative url using the absolute url made the image appear of course. Once your have as many sub directories as you do, it becomes a bit tricky using ../ trying to find the root directory. Try this new css attached.

[jpolo9]

hmm well that works great for FireFox, and looks extremely close in IE, but for some reason in IE it disables links, and you can't select any text. Still at least it looks right now :) thanks again!!
-Jesse

[_Aerospace_Eng_]

I'm not sure of any work around on this. I've using absolute positioning, position relative. The links ARE working but only if the mouse goes over a certain spot, like at the very bottom.

[jpolo9]

Yea i noticed that with the footer links also and i might have been able to live with that, but since my expanding div's use links that doesn't work, it is really frustrating. Works PERFECT In FF. hmm im going to go search to see if i can find a solution, thanks again,
-Jesse