Drop downs with transparent background png

Hi Dappy

You know what, IE is a PoS (just like doggies do).

It doesn't support png's except true color ones (not palleted) and it doesn't support Alpha Transparencies, which is what you need.

There are behavior workarounds, but they aren't worth the hassle.

I would make it work the way you want in FF and any decent modern browser, then have an IE conditional comment to link to a separate css file to give IE something.

Trevor

I realize that IE is a POS. I actually had good results with png graphics on my personal website - dappydesign.com. I thought I could work around the IE problems. I guess I may just leave the png's (in the ul background image) opaque for IE as it still looks "ok" but obviously looks a ton better in FF.

If I get the website working maybe I'll go back and try and get everything working in IE. Thanks for the reply

Dappy

On a slightly more positive note, PNG transparency is going to be supported by IE7.

To expand on Trevor's post:

The .png image has the advantage of independent opacity levels. For IE, you need to use the proprietary {filter: alpha(xx);}, where xx is the opacity factor, ranging from 0–100.

The problem with the opacity property is that it is inherited. The element you put it on and all descendents have that value. It will be critical that the image already look as if the background has faded through a bit so that as high an opacity factor as possible may be used.

So the steps are:

1. Use a .png bg image for modern browsers;
2. Make a .jpg image that already looks a bit faded;
3. Use a conditional comment to feed an additional style sheet to IE<7;
4. Make the element with the bg image {filter: alpha(opacity=80);} (or as high a value as possible).

Keep in mind that any images or text will also be slightly transparent. If you use a text color of, say, #333 as the default, and #000 in the affected area, it will be less noticeable.
Your plan of just letting it be is good. Call it a progressive enhancement for folks with modern browsers.

cheers,

gary

[/]

The problem with the filter:alpha xx is that the png graphic is actually a gradient. So the transparency goes from gradual to full opacity and it will possibly be over flash elements in one area (yeah I don't want much do I?). I started with high expectation cause I thought I could do it, apparently I am just asking a bit too much of IE. I, along with many other people, hate IE!!!!!

Thanks for the advice guys/girls - looks like the site will look great in FF but just really good in IE.

Dappy

As others have pointed out there are methods for getting IE to support alpha transparency on png's, they have their advantages and disadvantages, there is another thread on this forum with lots of information (a search should find it) and this page is a summary I made a while back.

Funny that when I made the same remark about opacity I had a member questioning it and quoting the flipping W3C specs as gospel.

Hugo.

The css3 color module rc is quite clear, Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

Right there it is, the element and its children (and, I assume, their children) are post-processed.

Of course, the spec says it is not inherited unless explicitly stated.

  
Name: 	opacity  
Value: 	<alphavalue> | inherit  
Initial: 	1  
Applies to: 	all elements  
Inherited: 	no  
Percentages: 	N/A  
Media: 	visual  
Computed value: 	The same as the specified value after clipping the <alphavalue> to the range [0.0,1.0].

But if the element is already processed, the base opacity is that of its ancestor. That's a legacy even if not 'inherited'.

cheers,

gary

I have read the specs Gary, and even have a reasonable capacity to understand them, but my point as usual goes unnoticed, still it's of little import.

Oh and the phrase "quite clear" used in reference to the W3C is an oxymoron

I have no idea what any of the W3C spec means at all. Ever. I barely understand the above posts - you're saying that the css opacity property is or is not inhereted to child elements? If I have a div with a 50% opacity and a <p> inside that div, it will or will not be at 50% if I don't specify the <p> to be somewhat transparent.

Back to the original post question -
I got the Sleight Background action working and it works in IE! So that's really cool. Thanks for the help. I was googling for something that did that but had come up with nothing.

Here is the follow-up problem. IE blocks the content saying that it is Active-x or something. Why does it do that? Is there a way I can avoid that?

I'm calling 2 behaviour files from the css - the csshover.htc and a pngbehavior.htc (for img png graphics) The background-image css is an external js file. Is there some way to implement these things without IE blocking them.

I'm using IE 6 on XP with SP2 I believe. (wishing I was on my mac tho!)

Thanks again for all the help.
Dappy

Yes to 'the element and all its content are 50%'. If you specify an opacity for a descendent of the original, it will compute the new value from the resultant of the first processing. IOW, each level is reduced from the previous. That's why opacity is not inherited. If it were, a div made 50% would have a paragraph 50% of the parent 50%, or 25%. The anchor in the <p> would end up at 12.5% and the span in the anchor would be 6.25%, &c..


That is due to user security settings. Go to tools|options|security, and move the setting from high to medium. You may set internet and intranet values separately.


That or Gnu/Linux.

cheers,

gary

Ok ok lets say that the problem is that opacity is legacied, bloody semantics :roll:

It's probably not worth worrying about—until something doesn't work as expected, then the nuance matters. If I could think of an example … .

Just as a pedagogist lucubration, here is a minimal test case. I'll leave it as an exercise for the class to find a case where it matters. :)

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xml:lang="en"  
      xmlns="http://www.w3.org/1999/xhtml"  
      lang="en">  
<head>  
  <meta http-equiv="content-type"  
        content="text/html; charset=utf-8" />  
  <meta name="generator"  
        content=  
        "HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />  
          
  <meta name="editor"  
        content="Emacs 21" />  
  <meta name="author"  
        content="Gary Turner" />  
  
  <title>Inheriting opacity</title>  
<style type="text/css">  
/*<![CDATA[*/  
  
html, body {  
    padding: 0;  
    margin: 0;  
    }  
  
body {  
    font: bold 120% verdana, sans-serif;  
    }  
  
p {  
    font-size: 1em;  
    }  
  
a {  
    color: black;  
    }  
  
.parent {  
    opacity: .5;  
    }  
  
.heir {  
    opacity: inherit;  
    }  
  
/*]]>*/  
  
</style>  
</head>  
  
<body>  
  <p>paragraph 100% <a>an anchor 100% <span>a nested span  
  100%</span></a>.</p>  
  
  <p class="parent">A 50% opacity paragraph <a href="#">A nested anchor  
  no inherit 50% <span>a nested span no inherit 50%</span></a>.</p>  
  
  <p class="parent">A 50% opacity paragraph <a class="heir">A nested  
  anchor inherit 25% <span class="heir">a nested span, inherit  
  12.5%</span></a>.</p>  
</body>  
</html>

cheers,

gary

Ah! The light bulb goes on. That makes it totally clear. And creates one more follow-up. Is it possible to get the nested element back to full(100%) opaque? I tried to do it by declaring another class with 1.0 opacity, 1.5 opacity (to counter the .5 opacity of the parent) but none of them worked. I'm guessing it can't be done becuase of the nature of the parent-child relationship.

So, since I'm viewing it locally something is different as opposed to if it was live? What I'm agetting at is will this affect the majority of users if my site is live on a server because that obviously will not work as it breaks the functionality of my site. I don't have the problem on other live sites that I have use behaviors for IE.

Thanks again
Dappy

BTW: Gary: your signature seems particularly appropriate. As I am being the design guy trying to do all kinds of ridiculous things. But I do attempt to steamline and validate code to the best of my ability - hence the CSS for layouts, drop downs etc.

No, you are still misunderstanding how opacity is handled.

Think of it like building up a montage in photoshop.

You make all your child element images and you paste them onto the parent element image. When the parent image is just right, you flatten everything down into one layer. You take that layer and paste it into its parent (the grandparent) - with the appropriate opacity. The individual child images and their opacity settings are irrelevant, they have been fully incorporated into the parent image. The grandparent has no knowledge of them, all it knows is its own children (the parent image) and their opacity.

Its similar in the browser, when the parent comes to be drawn on its parent, the children are already drawn. So the opacity applied to the parent necessarily is applied to the images created by rendering of the children.

(As interesting side effect of all this - what is the opacity of content that overflows - when the overflow setting is visible?)

The overflow has the processed value.

I should have answered, "give it a try and report back."

cheers,

gary

You should have said it then you pedagogue you.

Still back to the original statement, opacities problem is that it's legacies it's processing through to it's children! although in actual fact this is in reality not a problem but necessary action; it is that which confuses many though thus rendering it a problem for people as is often demonstrated. Of course now that Chris has written that crystal clear explanation the veil should be lifted.

I have to admit that I rather like MS behavior when position relative is applied to child elements though, sorry I know it's a slightly odd behavior! but MS do sometimes do things wrong that turns out to be right (can't believe I just said that, may I be struck down and damned for all eternity)

Hugo