Opacity in Opera..didn't work

#1

Hello,

Below is my script which work under IE8, Safrai4, Firefox 3.5, but NOT
opera 9.6

Anyone can find the problem?

=======================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/
reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<style>
#photo {
width:500px;
height:500px;
z-index:1;
}

#description {
width:500px;
height:200px;
background-color:green;
margin-top:-200px;
z-index:2
filter: alpha(opacity=50);
-ms-filter:"progid

XImageTransform.Microsoft.Alpha
(Opacity=50)";
opacity: .5;
}
</style>
</head>
<body>

<div id="photo">
<img src="http://images.google.com/intl/en_ALL/images/logos/
images_logo_lg.gif" width="500" height="500" />
</div>

<div id="description">
TEST
</div>

</body>
</html>
===============================

Thanks..

#2

Gazing into my crystal ball I observed Ryan Chan <ryanchan404 (AT) gmail (DOT) com>
writing in news:505f9169-07f7-4f30-b0f2-85d423fbe0a0
@v37g2000prg.googlegroups.com:

Quote:

Hello,

Below is my script which work under IE8, Safrai4, Firefox 3.5, but NOT
opera 9.6

I know that Opera supports opacity. Have a look at
[http://dev.opera.com/articles/view/css-and-opacity-methods-for-
creating-tr/] and compare what you're doing to what they are doing.

Quote:

Anyone can find the problem?

=======================================
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
html
head
title>Test</title
link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/
reset-fonts-grids/reset-fonts-grids.css" type="text/css"
style
#photo {
width:500px;
height:500px;
z-index:1;
}

#description {
width:500px;
height:200px;
background-color:green;
margin-top:-200px;
z-index:2
filter: alpha(opacity=50);
-ms-filter:"progid

XImageTransform.Microsoft.Alpha
(Opacity=50)";
opacity: .5;
}
/style
/head
body

div id="photo"
img src="http://images.google.com/intl/en_ALL/images/logos/
images_logo_lg.gif" width="500" height="500" /
/div

div id="description"
TEST
/div

/body
/html
===============================

Thanks..

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

#3

On 2009-10-04, Ryan Chan <ryanchan404 (AT) gmail (DOT) com> wrote:

Quote:

Hello,

Below is my script which work under IE8, Safrai4, Firefox 3.5, but NOT
opera 9.6

Anyone can find the problem?

The problem is that Opera is not quite conforming to the latest CSS3
draft where it says:

http://www.w3.org/TR/2008/WD-css3-color-20080721/#transparency

If an element with opacity less than 1 is positioned, the 'z-index'
property applies as described in [CSS21], except that 'auto' is
treated as '0' since a new stacking context is always created.

You've tried to set z-index on both #photo and #description, but it does
nothing on #photo in any browser because it's position: static. z-index
only applies to things that are position: anything except static (or
opacity: anything except 1.0, as described above). So start by deleting
the z-index rule on #photo.

Now the situation is that #description has opacity, which means,
according to the latest CSS 3 draft, that z-index should apply to it
after all. That would bring #description to the front and give you the
effect you want.

But not in Opera. In Opera it looks like #photo and #description are
both at level 3 (as if they were both z-index: auto). Although
#description is later in the document than #photo, so on top of it, the
inline box (the image) in #photo is at a higher stacking level than the
background of #description, _and they are both in the same stacking
context_. So this puts the image above the green background, so you
can't see it, but the word "TEST" above the image.

The easiest way to fix your problem is to get rid of z-index on #photo
and set z-index: 1 *and position: relative* on #description, to make
sure that z-index applies to it according to the better-established CSS
2.1 rules without relying on stuff in the latest CSS 3 draft.

Opera always did opacity subtly wrong (or at least, differently from the
CSS3 drafts, which their implementation may pre-date). It never followed
the CSS3 requirement that:

"Conceptually, after the element (including its descendants) is
rendered into an RGBA offscreen image, the opacity setting specifies
how to blend the offscreen rendering into the current composite
rendering"

But instead just gave every element its own blending level based on the
product of the opacities of its ancestors. Doing it the Opera way means
there's no requirement for opacity to even start stacking contexts,
which is probably why stacking and opacity are completely unrelated in
Opera.

Quote:

=======================================
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
html
head
title>Test</title
link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/
reset-fonts-grids/reset-fonts-grids.css" type="text/css"
style
#photo {
width:500px;
height:500px;
z-index:1;
}

#description {
width:500px;
height:200px;
background-color:green;
margin-top:-200px;
z-index:2
filter: alpha(opacity=50);
-ms-filter:"progid

XImageTransform.Microsoft.Alpha
(Opacity=50)";
opacity: .5;
}
/style
/head
body

div id="photo"
img src="http://images.google.com/intl/en_ALL/images/logos/
images_logo_lg.gif" width="500" height="500" /
/div

div id="description"
TEST
/div

/body
/html
===============================

Thanks..

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Opacity in Opera..didn't work

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Opacity in Opera..didn't work - 10-03-2009 , 11:08 PM

Re: Opacity in Opera..didn't work - 10-04-2009 , 12:16 AM

Re: Opacity in Opera..didn't work - 10-04-2009 , 04:53 AM