18 replies [Last post]
dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 34 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

Ok, So I might be asking too much or I may just not have enough css knowledge to do what I want to do.

I want to have css drop down menus. But I want the backgrounds to be transparent (pngs) of color so the user can see through them to the contents behind the page. I have spent about 2 full days working on it and it just won't work in IE. I've got the whatever:hover file going on for the hover elements of the drop down. I also have a png behavior file for IE to hanlde png graphics in the html. Unfortunately the Alpha Image Loader will not make my png transparent as the background image of the nested <ul> - it stays opaque. What can I do or where do I begin because I'm contemplating starting over. I can post some of the code I have so far if people want to see it.

Thanks,
Dappy

see attachment for example of what I am looking to accomplish.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 34 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

Drop downs with transparent background png

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Drop downs with transparent background png

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Drop downs with transparent background png

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. Smile

cheers,

gary

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 34 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

Drop downs with transparent background png

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Drop downs with transparent background png

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Drop downs with transparent background png

Quote:
The problem with the opacity property is that it is inherited.


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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Drop downs with transparent background png

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'. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Drop downs with transparent background png

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Drop downs with transparent background png

Smile

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 34 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

Drop downs with transparent background png

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Drop downs with transparent background png

dappy wrote:
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.

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..

Quote:
<snip>

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.

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.

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

That or Gnu/Linux. Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Drop downs with transparent background png

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Drop downs with transparent background png

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 34 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

Drop downs with transparent background png

kk5st wrote:
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. Smile

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.

kk5st wrote:
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.

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. Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Drop downs with transparent background png

dappy wrote:
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.

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?)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Drop downs with transparent background png

The overflow has the processed value.

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Drop downs with transparent background png

You should have said it then Smile 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 Smile 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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me