PNG Transparency in Firefox

[elMediano]

Hi everyone!

Well, I know something like this has been posted before, but it's not exactly about the same thing ;) I have received some e-mails from Firefox users saying my site doesn't work properly.

So you can follow me, here's the site: http://www.saurom.com(sorry it's in Spanish. you can skip the intro if you want. when the SAUROM logo appears, just click on it and it will take you to the main page. that's the one with the problem).

In my site, PNG Transparencies work perfectly in IE and Firefox, in terms of visualization, but the problem is the following:

I use layers to set my images and content. As you can see, the main content of the site, is surrounded by a dragon. That dragon is a whole PNG image and is on top of the layer that contains the content (hope you're still following me ;) )

Well, Firefox users have reported that they can see what's behind the dragon perfectly since the transparency works 100%, but they CANNOT click on any link or highlight any text.

For IE I used one of those Javascript PNG Fix files, but for Firefox, I don't know what to do.

Do you think it has to do with PNG Transparencies or with layers??:confused:

Thanks a lot and I hope we can sort this out!

elMediano

[Wickers]

I think the first step to anything re: that site, would be to remove the popups.
:p

[elMediano]

hehehe

i know! but i don't decide that! the popups appear beacuse of the visits counter, which is a free service. the band's using that service becuse the statistics are shown in a great and clear way... the only problem... popups.

do you know of any free service with same characteristics and no popups??if so, plz let me no!

[Gargoyle]

I use layers to set my images and content. As you can see, the main content of the site, is surrounded by a dragon. That dragon is a whole PNG image and is on top of the layer that contains the content (hope you're still following me ;) )

Well, Firefox users have reported that they can see what's behind the dragon perfectly since the transparency works 100%, but they CANNOT click on any link or highlight any text.


What your firefox users are saying is correct. You have a layer on top of your content. Think of it like a piece of acetate on top of a sheet of normal paper. You can see the paper but you cannot draw on it because the acetate is in the way.

I suggest you rethink the site a bit. It does look very impressive, but that's no good if it doesn't work.

[elMediano]

So there is no way to make that work on Firefox???!! that's a negative point for this browser :grumble:

it's really weird that the exact same configuration of layers work on IE but not on FireFox. according to what you said, it shouldnt work on IE either, since there is a layer on top of the content as well but, as i see, IE sorts this out.

any other solutions??... rethink the site is something i really dont wanna do!!

thanks a lot anyway

[torifile]

it's really weird that the exact same configuration of layers work on IE but not on FireFox. according to what you said, it shouldnt work on IE either, since there is a layer on top of the content as well but, as i see, IE sorts this out.
IE does all sorts of stuff it's not *supposed* to. Really, you need to design things that work in firefox and fix it for IE, not the other way around.

[elMediano]

I know what you mean, but 90% of the people that visits this website uses IE, so that's why IE is my priority in this case.

Any ideas of how to make it work, without changing the design?

[drewprops]

Neat website!!
Add this to your perspective... there is a new version of IE around the corner and everyone is hoping that it will be far more compliant than any version of IE that's ever been made. What if your website doesn't work with THAT version of IE? that would be funny!! (and annoying for you)

I am learning that planning for the future is part of good web design. What these guys (and others) are telling you will make your site last a LOT longer if you take their advice into account now. Don't just design for IE and hope it works elsewhere. People who design websites for one browser are really painting themselves into a corner. This is something that I've been guilty of until recently... learning to code my sites to be seen in multiple browsers has been a challenge.

[elMediano]

Thanks a lot for the nice comments mate! I'll bear them in mind

I know what they're saying is 100% true. To be honest I don't know that much about coding, I just make a vast research before doing what I want to do, since I'm more a Graphic Designer (well... future Graphic Designer) than a web developer. I'd like to learn how to code properly in the near future though.

I'm not saying that IE is better than FireFox because it makes my site work. But from what I gathered here, IE is doing something it shouldn't be doing, but that something is making my site work... so, in this specific case, is it then something that IE shouldn't be doing, or something that FireFox should do?
I'm not trying to compete with FireFox at all, it's just that it could be something FireFox lacks in this case.

As you said, I want my site to work in all browsers, and that's why I'm here ;) So, any suggestions to make it work without changing the appearance?

The only thing I can think of, is to put the content layer on top of the dragon and make it smaller in height so it doesn't go over the image when scrolled... only that the content wouldn't have the same nice fading effect when it goes under the dragon.

... got so many things to learn :D

[elMediano]

hi again

surfing the net to find a solution, i've found out that my problem has nothing to do with PNG transparencies but with layers. there are loads of threads about this issue related to FireFox and Netscape. apparently the only way to solve this problem using these browsers is to change the z-index of the layers.

it's exactly what i was trying to say: why can't you click on the content if the centre of the layer is empty?? it doesn't even work if you put a whole empty layer on top of another one.

i think this is a firefox problem, not an IE one. dont you think?

PS: plz dont get mad at me! i know FF is much better but maybe not for this specific case.

[torifile]

PS: plz dont get mad at me! i know FF is much better but maybe not for this specific case.
I don't know the specifics of the situation, but my guess is that you coded something wrong and IE is behaving in a way it shouldn't, according to the way the specifications are written. Just because it happens to do what you were hoping for and FF doesn't mean that IE is doing it right and FF is doing it wrong. It's like making a math mistake. Say you add wrong. If you have 2 calculators, one that tells you that your solution was right (IE) and the tells you the solution (FF) is wrong, does that make the FF calculator wrong?

[rollercoaster375]

Imagine if the image wasn't transparent. Would you expect text to show up on top of the image then? No. It doesn't make sense.

Sorry, there isn't any way to do the effect you're looking for without Flash (And maybe not even then - I don't use flash/don't know its capabilities).

[elMediano]

Image if the image wasn't transparent. Would you expect text to show up on top of the image then? No. It doesn't make sense.

Yeah, of course, text wouldn't show up. But that's the thing... the image IS transparent, and the centre of it empty, no pixels, no data, no info, nothing. I don't know... it's confusing for me and your level of knowledge in this issue is much higher than mine.


Sorry, there isn't any way to do the effect you're looking for without Flash (And maybe not even then - I don't use flash/don't know its capabilities).

Well, I won't surrender ;) I'm sure there is a way to do it. :devil: hehehe

Also guys... I've asked so many times how would you do it if you wanted it to work in FireFox, but no one gave me an answer :( , instead you focused this topic on how FF is much better than IE, and how IE does this things it's not supposed to. Again, I'm not trying to say IE is better (not at all), I just want to find a way to make my site work in all possible browsers because... what about if I find a way to make it work in FF and it doesn't work in IE? I don't want that.

Well, thanks a lot for your time guys. I'll post my solution if I found one :D

cya

[rollercoaster375]

Yeah, of course, text wouldn't show up. But that's the thing... the image IS transparent, and the centre of it empty, no pixels, no data, no info, nothing. I don't know... it's confusing for me and your level of knowledge in this issue is much higher than mine.
Images are completely rectangular... A PNG having transparent data doesn't change the shape of the image. What happens, is that the rendering agent is told to make that area of the image transparent.

[alcimedes]

Basically it's like a wooden box with a glass pane in the center. Although you can see in the center of the box, you couldn't reach in and touch anything in there.

As far as (correct) rendering in concerned, whether part of an layer is transparent is irrelevent to whether or not you can click on stuff underneath it. FF treats transparency like a piece of glass. IE says that there's nothing there.

You need to design accordingly.

Could you make a table with sections of your dragon image around the edges of it, with the center of the table containing the data you want displayed?

[Gargoyle]

Take all your great artwork, and make 1 image the size you want the page to be. Lets say 600px wide, by 800 tall.

Set it to be the background for the page.

Add a layer with your content, 300 to 400 px wide, and center it in the page.

You will have *almost* the same effect with much less hassle.

I would try and get away from limiting the vertical scroll too, really pisses me off - My browser window is normally portrait shaped, not landscape!

[elMediano]

Hello again!

I come back to let you know I could finally fix the error for FireFox! You can check it out at www.saurom.com It does actually work better in FF than IE now! hehehe except for the scroll bar colours.

Thanks a lot to everyone who tried to help! Really appreciate it! I'll come back sometime if I find more bugs.

Thanx again. cya!