1 Posted by minghong on 1 November 2005 | Permalink

I've tried with Firefox 1.5 Beta 2. All those test works for me. You should use a more up-to-date Gecko engine (Mozilla 1.7.12 is using an engine that is more than 1 year old). ;-)

2 Posted by Jacob on 1 November 2005 | Permalink

minghong:
Yes, the new release of Firefox does a good job but it's not officially released yet, and more to the point, people will still use 1.0x after it is released. If it doesn't work in both, at least for a while, then it (probably) isn't much good.

3 Posted by ppk on 1 November 2005 | Permalink

Minghong, I don't know what sort of Firefox you use, but my FF 1.5 beta treats the examples exactly like Moz 1.7.12 does.

Please check your facts before posting.

4 Posted by Robin on 1 November 2005 | Permalink

Sorry ppk, but I agree with minghong. Just tested on Fx1.0.7 and Fx1.5b2 and all the elements are working fine in 1.5b2. There's also no flicker.

5 Posted by ppk on 1 November 2005 | Permalink

Hmmm, time for a more detailed comparison.

I'm using FF 1.07 and 1.5 beta on WinXP SP 2, and they behave exactly like Moz 1.7.12. Which ones are you using?

6 Posted by Robin on 1 November 2005 | Permalink

1.0.7 and 1.5b2 on WinXP SP2. 1.0.7 is based on Gecko 1.7 (same as Moz 1.7.12), 1.5b2 is based on Gecko 1.8 (1.8b5 according to the rv value in my UA string).

7 Posted by Analgesia on 1 November 2005 | Permalink

nice work.

In Firefox 1.0.7 the elements don't always flickers (noticeably).

Also the bottom-margin of the h4 is bigger once being opacitated. It is doubled if I measure the pixels. The DOM inspectors however says its still the same.

8 Posted by Ali P on 1 November 2005 | Permalink

I find the whole opacity implementation very frustrating: on the whole, I wan't the background to be opaque, but not the text. Can one achieve this without using two absolutely-positioned divs, one on top of the other? I haven't found a way.

9 Posted by Robin on 1 November 2005 | Permalink

Ali:

background-colour: rgba(xxx, xxx, xxx, yyy);

Don't expect it to work outside of Safari. Alternatively you can make an alpha png and tile is as a background image.

10 Posted by minghong on 1 November 2005 | Permalink

@ppk, did I miss anything? What I saw seems prefectly fine (that the "fact" I saw). I've tested with 1.5 Beta 2 on both P3 and P4 systems, under Windows XP.

Maybe it is a non-XP problem?

11 Posted by ppk on 1 November 2005 | Permalink

Right! Beta 2! I wasn't aware of its release, and you're right, all tests work fine in FF 1.5 beta 2.

One more mystery solved.

12 Posted by Peter Leing on 1 November 2005 | Permalink

FYI: Safari 2.0.2 (416.12) w/ 10.4.3 has the same results as Safari 1.3.

13 Posted by Ali P on 2 November 2005 | Permalink

FYI: Everything fine in Firefox 1.5 RC1 (XP SP2), as you'd expect.

Robin: thanks for the advice on rgba - I've never seen that. There's also hsla (Hue, Saturation, Lightness, Alpha) in CSS3. Not much use though... :)

14 Posted by Martin Hintzmann on 3 November 2005 | Permalink

Ali: if you just want your background to be transparent and not your text, then use PNG.

Here is an exampel (in Danish)
http://www.hintzmann.dk/testcenter/css/png/index2.html
The last box 3, works in all PNG-supporting browsers incl. IE 5.5+

15 Posted by Cris Perdue on 8 November 2005 | Permalink

Regarding the comment that an element must "have layout" in IE before it can accept an opacity:

I have found the following code to work in IE, and according to the online Microsoft documentation this should work:

if (!node.currentStyle.hasLayout) {
node.style.zoom = 1;
}

The IE documentation does saythat a node must have layout to have settable opacity.
It indicates that zoom ==> hasLayout.
So no layout means no zoom. Now we set zoom to 1, forcing layout but not changing font sizes.

It works for me.