12 replies [Last post]
yostar
yostar's picture
Offline
Regular
Toronto, Ontario, Canada
Last seen: 12 years 15 weeks ago
Toronto, Ontario, Canada
Timezone: GMT-4
Joined: 2003-10-17
Posts: 18
Points: 0

Hi there,
I can't seem to set opacity on a a white background in netscape (7).
Works just fine in explorer:
#my_divvy { filter: alpha(opacity=80, style=0);background-color: #FFFFFF }
But in netscape, it's just white.
I found some solution on the net with javascript - but it was messy and I'm sure CSS can handle it!!

Thanks. Wink

Yoav Schwartz
YMS Dynamics

procywolfy
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2003-07-21
Posts: 21
Points: 0

Setting opacity that works in Netscape

I think this is just a matter of that selector simply not working in Netscape 7 Tongue Sorry, m8: You could try image rollovers if you want the same effect Smile I could be mistaken, though..

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 18 hours 7 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Setting opacity that works in Netscape

Filter wont work in Netscape, you will need to use -moz-opacity to get a similar look in Mozilla based browsers.

Hope that helps

yostar
yostar's picture
Offline
Regular
Toronto, Ontario, Canada
Last seen: 12 years 15 weeks ago
Toronto, Ontario, Canada
Timezone: GMT-4
Joined: 2003-10-17
Posts: 18
Points: 0

Setting opacity that works in Netscape

images i would like to avoid. Here's the effect i'm going for: http://www.ardesignbuild.com/indexr.html

can you show me an example of this method tony?

Thanks.

Yoav Schwartz
YMS Dynamics

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 18 hours 7 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Setting opacity that works in Netscape

Hi yostar,
I haven't played around with filters much but something like:
#my_divvy { filter: alpha(opacity=80, style=0);background-color: #FFFFFF; -moz-opacity:0.8; } may do the trick.

Hope that helps

yostar
yostar's picture
Offline
Regular
Toronto, Ontario, Canada
Last seen: 12 years 15 weeks ago
Toronto, Ontario, Canada
Timezone: GMT-4
Joined: 2003-10-17
Posts: 18
Points: 0

Setting opacity that works in Netscape

You're a good man Tony! - i can see why you're the "leader"

works like a charm in NS7 - that's all i need.

Thanks. Laughing out loud

Yoav Schwartz
YMS Dynamics

rocketscience
Offline
Regular
Calgary, AB
Last seen: 15 years 49 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

Setting opacity that works in Netscape

Ah. I was going to ask "Where is the example?" but I realized of course it only works on IE for the PC. You might want to make allowances for the wonky box model on IE 5; things look a little funny on that version.

I've been using PNG files instead to create this effect. Could we add something that would include a PNG on compliant browsers?

yostar
yostar's picture
Offline
Regular
Toronto, Ontario, Canada
Last seen: 12 years 15 weeks ago
Toronto, Ontario, Canada
Timezone: GMT-4
Joined: 2003-10-17
Posts: 18
Points: 0

Setting opacity that works in Netscape

sure, what do you propose?
BTW- Does everything look a little messed up in IE5? I've never seen it...
I was wondering how all the center positioning I've done would look like in MAC versions and old IE versions.

Yoav Schwartz
YMS Dynamics

rocketscience
Offline
Regular
Calgary, AB
Last seen: 15 years 49 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

Setting opacity that works in Netscape

This has an interesting effect; I made a PNG the background image, so it works in everything but IE, which recognizes the alpha filter. Pretty neat, and the most effective solution I've seen so far.

The problem is, the filter makes all the content partly transparent in IE; is there a way around this? I tried nesting another but div in there but it didn't seem to work.

rocketscience
Offline
Regular
Calgary, AB
Last seen: 15 years 49 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

Setting opacity that works in Netscape

Saying that, on your sample [ which is very slick, BTW] the text is not transparent! Why?

yostar
yostar's picture
Offline
Regular
Toronto, Ontario, Canada
Last seen: 12 years 15 weeks ago
Toronto, Ontario, Canada
Timezone: GMT-4
Joined: 2003-10-17
Posts: 18
Points: 0

Setting opacity that works in Netscape

thanks...

I don't know why the text isn't transparent - got lucky i guess! I've heard that that's a common issue... it actually set all form elements to a transparent background (on the contact us page) so I ended up placing a div directly ontop of the transparent one.

I think I'm going to stay away from the ping method, the truth is I'm not even all that sure how to create the ping image :?

I'd love to see an example though of what you tried.

Yoav Schwartz
YMS Dynamics

rocketscience
Offline
Regular
Calgary, AB
Last seen: 15 years 49 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

Setting opacity that works in Netscape

These are both PNG tests:

http://threespeedpress.com/dev/alphapng.html
http://threespeedpress.com/dev/alphapng2.html

The first one is a layer of text with an alpha background saved as a PNG. The second one uses two different PNG files as background-images; each one is a partly transparent PhotoShop image saved as PNG-24 using the "Save for Web"

zeeker
Offline
Regular
Last seen: 15 years 40 weeks ago
Joined: 2003-10-11
Posts: 11
Points: 0

Setting opacity that works in Netscape

OMG!!!

This effect could change the way I am doing certain elements in css!!!
SWEET!!! Laughing out loud Laughing out loud Tongue

Is there a site that shows all the available options for this?