Click to See Complete Forum and Search --> : png transparency for css in ie nothing working


tableforglasses
10-03-2007, 10:39 AM
Hey guys
I have tried about a dozen different fixes for ie not showing pngs transparently and so far not a thing has worked. I know the new versions of ie work with pngs but a lot of people have the old and I want to get this fixed. I have googled as well as searched this forum and found solutions that haven't worked thus far. I am wondering if it has something to do with the fact that in my css the images I am trying to get transparent are images that I am using as background images or maybe I am just coding it wrong. Any thoughts as to why the standard solves are not working? the page I am working on is
www.themastersinn.com/new.html
the css
http://www.themastersinn.com/layout.css

thanks for the help

RassaH
10-03-2007, 11:11 AM
if you just need the background to be half see through, you could just use: filter: alpha(opacity=50);

else have a look at here http://koivi.com/ie-png-transparency/

WebJoel
10-03-2007, 11:36 AM
I don't think that alpha-transparency fix for IE works for background-images.. It's a rather severe limitation, if this is fact.

You might look into 'transparent *jpg' images... I think that there is a way to select one 'color' in a *jpg and make it transparent.

The true "transparent *jpg" is a format that is coming... I don't know when but read a short paper on the subject a few months ago..

tableforglasses
10-03-2007, 12:27 PM
I guess it is because it is a background image. Anybody know a fix for this problem being that it is a background image?

ray326
10-03-2007, 12:46 PM
I think that there is a way to select one 'color' in a *jpg and make it transparent.Nope. That would be GIF.

tableforglasses
10-03-2007, 01:33 PM
yeah i know that on the jpeg, but gifs are so limited compared to png. I would love to stick with the png

WebJoel
10-03-2007, 02:44 PM
Perhaps, -surround whatever element (UL, whatever) that you want to use background-image *PNG, with a "position:absolute;" container and make the UL (or whatever) "position:relative;" and have a play at z-indexes. You might 'trick' the browser into showing the transparency.

Here is some interesting reading re: IE & transparent *jpg.
http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx

http://d21c.com/LadyWolfette/trans_jpg.html
(Haven't tried the above)

Webnerd
10-03-2007, 04:35 PM
There are hacks for background-image but you don't want to go there

http://allinthehead.com/retro/69/

tableforglasses
10-04-2007, 10:27 AM
I'm sure this is why you said not to go there, but I tried the js and it worked perfectly at least worked to make the png transparent, so that is awesome because I thought it would never work, but now I run into a different problem the navigation links are no longer working in ie on any version. Everything works fine in firefox and safari, but when you mouseover there is nothing in ie. If you could look at how I placed the javascript in or anything else that might tell why it is doing this, that would be great. I was so stoked to see the problem solved and then crushed when it screwed other stuff up, maybe this is the byproduct of the script and I just can't use it, but any help would be great.
www.themastersinn.com/new.html

Webnerd
10-04-2007, 01:05 PM
No, it's a by-product of IE not playing nice. Maybe z-indexing the nav above the PNG would help

tableforglasses
10-04-2007, 01:11 PM
well it is just a css style, the words are showing up fine, but the css style links are not so not sure z-index would do anything.

tableforglasses
10-04-2007, 01:25 PM
it's odd because it is only affecting the nav bar, there are other links with the same css style on the page, that are not affected at all by the js.
www.themastersinn.com/new.html