Opacity setting

Explorer 7 beta 3 seems to create an extra layer of text, which is slightly moved to the right, resulting in a very ugly effect.

Today we're trying to tweak the opacity of a few elements to create a fade-in effect. Some elements don't allow you to set their opacity in some browsers. In particular, setting the opacity of a table(-element) in all browsers is impossible.

See also the opacity CSS test page.

Setting opacity in JavaScript

I use the following script for setting the opacity:

function setOpacity(value) {
	testObj.style.opacity = value/10;
	testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}

opacity is for Mozilla and Safari, filter for Explorer. value ranges from 0 to 10.

Test results

General Explorer note: an element must have layout in order to obey filters. Furthermore Explorer 6 does something weird to the left margin of the test element, while in Explorer 7 beta 3 there appear two layers of text in an element with changed opacity.

Test Element Explorer 6 Explorer 7 beta 3 Firefox 1.5 Safari 1.3 Opera 9
DIV Yes Yes Yes Yes Yes
TABLE Yes Yes Yes Yes Yes
TBODY No No Yes No No
TR No No Yes No No
TD Yes Yes Yes Yes Yes
H4 Yes Yes Yes Yes Yes
P Yes Yes Yes Yes Yes
IMG Yes Yes Yes Yes Yes

Try it here.

Test elements

This is text in a DIV.
This is text in a TABLE.

This is text in a paragraph.

test image