User Name
Password
AppleNova Forums » Programmer's Nook »

PNG Transparency in Firefox


Register Members List Calendar Search FAQ Posting Guidelines
PNG Transparency in Firefox
Thread Tools
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-02-26, 08:44

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??

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

elMediano
  quote
Wickers
is not a kind of basket
 
Join Date: May 2004
 
2006-02-26, 08:52

I think the first step to anything re: that site, would be to remove the popups.
  quote
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-02-26, 08:58

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!
  quote
Gargoyle
http://ga.rgoyle.com
 
Join Date: May 2004
Location: In your dock hiding behind your finder icon!
 
2006-02-26, 09:45

Quote:
Originally Posted by elMediano
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.

OK, I have given up keeping this sig up to date. Lets just say I'm the guy that installs every latest version as soon as its available!
  quote
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-02-26, 10:51

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

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
  quote
torifile
Less than Stellar Member
 
Join Date: May 2004
Location: Durham, NC
Send a message via AIM to torifile  
2006-02-26, 11:07

Quote:
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.
  quote
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-02-26, 11:43

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?
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2006-02-26, 11:47

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.

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-02-26, 12:22

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
  quote
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-02-26, 14:17

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.
  quote
torifile
Less than Stellar Member
 
Join Date: May 2004
Location: Durham, NC
Send a message via AIM to torifile  
2006-02-26, 15:17

Quote:
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?
  quote
rollercoaster375
Senior Member
 
Join Date: Mar 2005
Location: UIllinois (Champaign, IL)
Send a message via AIM to rollercoaster375 Send a message via MSN to rollercoaster375 Send a message via Yahoo to rollercoaster375 Send a message via Skype™ to rollercoaster375 
2006-02-26, 15:46

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).

Last edited by rollercoaster375 : 2006-02-27 at 08:50.
  quote
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-02-27, 07:27

Quote:
Originally Posted by rollercoaster375
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.

Quote:
Originally Posted by rollercoaster375
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. 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

cya
  quote
rollercoaster375
Senior Member
 
Join Date: Mar 2005
Location: UIllinois (Champaign, IL)
Send a message via AIM to rollercoaster375 Send a message via MSN to rollercoaster375 Send a message via Yahoo to rollercoaster375 Send a message via Skype™ to rollercoaster375 
2006-02-27, 08:56

Quote:
Originally Posted by elMediano
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.
  quote
alcimedes
I shot the sherrif.
 
Join Date: May 2004
Send a message via ICQ to alcimedes  
2006-02-27, 09:02

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?

Google is your frenemy.
Caveat Emptor - Latin for tough titty
I tend to interpret things in the way that's most hilarious to me
  quote
Gargoyle
http://ga.rgoyle.com
 
Join Date: May 2004
Location: In your dock hiding behind your finder icon!
 
2006-02-27, 15:50

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!

OK, I have given up keeping this sig up to date. Lets just say I'm the guy that installs every latest version as soon as its available!
  quote
elMediano
New Member
 
Join Date: Feb 2006
Location: Hatfield, Hertfordshire, UK
Send a message via Skype™ to elMediano 
2006-03-14, 13:11

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!
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
Firefox and Quicktime - Having problems tomster2300 Genius Bar 5 2005-08-12 16:05
PNG Transparency Problems in... Firefox? Yes. Brad Programmer's Nook 7 2005-08-01 12:33
Firefox for Mac: User Interface Grievances Brad Third-Party Products 33 2005-05-26 16:45
bye bye firefox, hello mozilla. usurp Third-Party Products 16 2004-08-26 17:25


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 10:15.


Powered by vBulletin®
Copyright ©2000 - 2023, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2023, AppleNova