 |
12-12-2007, 11:16 AM
|
CSS3 opacity problem
|
Posts: 3,155
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
As many of you know, opacity has been the most widely implemented CSS3 feature. It is very nice, allowing you to create transparency on just about anything, including images, text or a div. It is, however, not without its quirks. Take this simple example:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Opacity Test</title>
<style>
body {
background: #03f;
}
div#transparent {
opacity: .5;
background: #060;
width: 200px;
padding: 10px;
position: absolute;
top: 35px;
z-index: 2;
}
div#not_transparent {
opacity: 1;
background: #fff;
}
</style>
</head>
<body>
<h2>Hello World</h2>
<div id="transparent">
<div id="not_transparent">
<h3>Hello World</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</body>
</html>
Cut and paste the above code into your favorite text editor, then preview it in Firefox.
The div with the id of "not_transparent", although it is very clearly defined as having an opacity of 1 (zero transparency), still inherits the opacity of it's parent, the div "transparent". The nice blue of the background and green of the transparent div show right through the black font and white background of the not_transparent div. You cannot prevent opacity from inheriting, which is a real pain if you want to use these divs as containers.
If anyone knows a solution to this problem, I'd love to hear it. I don't think there is one, however.
Last edited by wayfarer07; 12-12-2007 at 12:05 PM..
|
|
|
|
12-12-2007, 11:26 AM
|
Re: CSS3 opacity problem
|
Posts: 1,007
Location: Kokkola, Finland
|
sounds like you need to set the opacity for each div then?!
|
|
|
|
12-12-2007, 11:32 AM
|
Re: CSS3 opacity problem
|
Posts: 3,155
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
As you can see, I have explicitly set the opacity of the child div to 1 (which means zero transparency). However, it still has transparency. This cannot be helped, as far as I know. Set it for each div all you like. If it's within an opaque div it will be opaque. Try putting more children into the child div like little russian-dolls and watch them all be opaque.
|
|
|
|
12-12-2007, 01:37 PM
|
Re: CSS3 opacity problem
|
Posts: 251
|
Quote:
|
Try putting more children into the child div like little russian-dolls and watch them all be opaque.
|
Then don't insert not_transparent div like children. Set one tranparent div (position, height, width, etc.) and second one (position, height, width, etc.) with higher z-index.
Shivaji
Last edited by shivaji; 12-12-2007 at 01:38 PM..
|
|
|
|
12-12-2007, 02:07 PM
|
Re: CSS3 opacity problem
|
Posts: 3,155
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
Yes, I understand what you are trying to say, and I know that if the div not_transparent is positioned (say absolutely), is outside of the other div, and is the top layer, it will not be opaque. However, consider for a moment that it could be useful, or at least nice to have an opaque div that holds un-transparent content (like a drop down menu with solid text).
I thought this might be an interesting discussion.
|
|
|
|
12-12-2007, 02:16 PM
|
Re: CSS3 opacity problem
|
Posts: 155
Name: Mick
Location: Tenerife
|
All CSS elements inherit values from their parents (AFAIK).
|
|
|
|
12-12-2007, 04:00 PM
|
Re: CSS3 opacity problem
|
Posts: 8,823
Location: Tennessee
|
Since CSS3 is barely supported in ANY browser, this is a nice exercise, but not really practical at this point. IE6 doesn't support it and that's still almost 70% of the browser users out there.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
12-12-2007, 06:54 PM
|
Re: CSS3 opacity problem
|
Posts: 3,155
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
Quote:
|
IE6 doesn't support it and that's still almost 70% of the browser users out there.
|
True, but IE6 supports the alpha transparency filter. It's almost exactly the same as the opacity statement, which is supported by EVERY major browser except for the IEs, which as stated support the alpha transparency filter, which works about the same, the only difference that I've noticed being a slightly reduced quality to transparent text.
Read this guideline: http://www.quirksmode.org/css/opacity.html
|
|
|
|
12-12-2007, 08:58 PM
|
Re: CSS3 opacity problem
|
Posts: 22,235
Location: Blackpool. UK
|
well validating CSS3 code through a CSS2 validator would throw a few errors.
|
|
|
|
12-13-2007, 03:51 PM
|
Re: CSS3 opacity problem
|
Posts: 8,823
Location: Tennessee
|
Quote:
|
but IE6 supports the alpha transparency filter.
|
Yes, and it works.. as long as you're not using it on a REPEATING graphic, then it fails miserably.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
12-13-2007, 08:56 PM
|
Re: CSS3 opacity problem
|
Posts: 251
|
Quote:
|
well validating CSS3 code through a CSS2 validator would throw a few errors.
|
Oooo, that is problem. Thanks, Chris.
|
|
|
|
12-14-2007, 02:11 AM
|
Re: CSS3 opacity problem
|
Posts: 238
Location: United States
|
I am fairly sure that behavior of opacity is written in the w3c docs, so technically it's not a quirk. That's why it behaves in this manner in all browsers, including IE 7 (using the alpha filter) and Opera. I've seen this type of discussion before, and it usually turns out that the best two solutions (which were already mentioned here) are to either use absolute positioning outside of the opaque element, or use a transparent PNG background with the appropriate IE 6 css hacks for opacity and repeating images.
Personally, I prefer the transparent PNG solution, because absolute positioning always ends up a hassle for me if I change an image or add text and displace the element or something.
__________________
The interlocking pieces of web development: usability, performance, accessibility, and standards.
|
|
|
|
12-15-2007, 12:28 AM
|
Re: CSS3 opacity problem
|
Posts: 3,155
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
I didn't say it was a quirk. Perhaps it should have been specified better by the WC3, but I'm not going to complain about that organization. Besides, the CSS3 is specs are far from final and could be changed, and as LadynRed pointed out, have barely been implemented. Maybe the final spec for this attribute will be modified.
Good point about transparent PNG's. Unfortunately IE6 does not support them, so lesser quality GIF's must be pointed at that browser.
|
|
|
|
12-15-2007, 12:31 AM
|
Re: CSS3 opacity problem
|
Posts: 3,155
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
Errr... was reading my first post... Guess I did say it was a quirk. Didn't mean that in the literal sense 
|
|
|
|
12-15-2007, 02:08 AM
|
Re: CSS3 opacity problem
|
Posts: 74
Name: Steve
Location: Canuckistan
|
Quote:
Originally Posted by LadynRed
Since CSS3 is barely supported in ANY browser, this is a nice exercise, but not really practical at this point. IE6 doesn't support it and that's still almost 70% of the browser users out there.
|
IE6 is only 34.5% of the market share. All versions of IE in total don't even command 70%.
__________________
This is my edited bleeding signature.
|
|
|
|
12-15-2007, 02:37 PM
|
Re: CSS3 opacity problem
|
Posts: 8,823
Location: Tennessee
|
It varies by audience. As I said, MY STATS show that there are far more than 34.5% of my visitors using IE6. The point is, alienating 35% of web users is NOT a good idea.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
12-15-2007, 05:07 PM
|
Re: CSS3 opacity problem
|
Posts: 74
Name: Steve
Location: Canuckistan
|
Quote:
Originally Posted by LadynRed
It varies by audience. As I said, MY STATS show that there are far more than 34.5% of my visitors using IE6. The point is, alienating 35% of web users is NOT a good idea.
|
Show me where I said it was.
__________________
This is my edited bleeding signature.
|
|
|
|
12-16-2007, 01:01 AM
|
Re: CSS3 opacity problem
|
Posts: 3,155
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
I think we can all agree that we look forward to the time that CSS3 really is widely implemented. Multiple backgrounds and native rounded corners etc will be pretty smokin' cool.
|
|
|
|
12-16-2007, 12:03 PM
|
Re: CSS3 opacity problem
|
Posts: 8,823
Location: Tennessee
|
Quote:
|
Show me where I said it was.
|
You didn't and I wasn't implying that YOU said it at all. I was referring to the WIDER reference.
Quote:
|
I think we can all agree that we look forward to the time that CSS3 really is widely implemented
|
Amen to that !
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
« Reply to CSS3 opacity problem
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|