Topic: "Uninheriting" styles?

OK, I'm pretty sure that's not the right term for this, but basically what I want to know is can I apply a set of styles to a "container" div and then have those styles not be inherited by elements within that div?

I'm messing around with a new style sheet for my site (which is still in development and still up for review), and I've got a nifty new background image over which I want to have my content div run at 75% opacity (I realize that I am kind of going in the opposite direction from where I wanted to be going--away from complex backgrounds rather than toward them, but I just got this idea and I wanted to try it out). Having text in this div is not that big of a deal, even if it shows up at 75% opacity, but when images come into play it gets nasty. I tried setting the opacity of images to 100%, but all this does is give images a relative opacity of 100% (meaning an opacity of 75%, since that is inherited from the content div the images are contained in).

So, I would like to do one of the following things, if possible (in order of preference):

1. Apply the transparency styles only to the container div, in effect "turning off" inheritance for those styles.
2. If there is no way to do #1, then I can live with just making images 100% (absolute) opaque;

I haven't been able to find an "inheritance: none" style, but I can't imagine there is no way to parent transparency. I imagine that the answer to this is either very simple or very difficult...

(Oh, here are the dreaded transparent images in action... you'll need to click on the third color scheme to see the effect.)

Hmm... I thought somebody would have gotten around to this by now. Is there just no answer, or has no one seen this yet?

Suho1004: Its not that really its just that whenever I've done it I have reset the styles within the box and the opacity has been fine (at least as far as I can remember).

I can't see any changes of opacity on the page you link to. I wonder how you are setting the opacity - is it like:

<div OPACITY 75%>
<div OPACITY 100%>

<p>My text</p>

</div>
</div>

There may certainly be problems if you tried to give inline elements an opacity of 100% as I find they don't tend to 'stick' as well as they do with block elements.

___________________
Emps

FAQs: Emperor

Which style sheet did you look at? If you go down to the bottom of the page you should see the words "color schemes" followed by three small graphics. If you click on the third one it will switch to the style sheet I'm referring to (style sheet switching doesn't work in Opera yet, though, so you'll have to use either IE or NN).

Basically what I've got is a "content" div, and everything on the page goes inside that div. So, basically, I would have to reset the styles for every single element in my style sheet. I figured I could live with just the images being 100% opaque, so I set the opacity for the img element to 100% (I used the CSSin the FAQ, by the way). This, however, does not "reset" the opacity, it just applies this opacity to the opacity of the parent element (the content div), still leaving me with 75% opacity. I tried setting opacity on the img element to 75%, but that just ends up giving all images within the content div an opacity of 56.25% (75% of 75%).

Does that make things any clearer?

[Edit: Once again, someone manages to sneak something in while I'm typing. I'll give that a try, Slime.]

[This message has been edited by Suho1004 (edited 02-26-2003).]

I'm not sure if there's a way. You might try setting the opacity of the inner elements to 133% (yes, over 100%, because 75% * 133% = 100%), but I wouldn't be surprised if the browser pre-clips the values to a maximum of 100%.

If it does, you might be out of luck.

OK, just tried setting img opacity to 133%... no dice. I tried moving the img styles down past the content div styles--still no dice. I even tried sticking my head out the window and shouting at the dog outside while editing the style sheet with my big toe. Surprisingly enough, that didn't work either.

Oh well, opacity is not crucial for this scheme to work, and it would probably do a number on slower computers anyway. It did look kind of nifty, but what can you do? Maybe I'll search around for something on the Net, but I'm not going to be holding my breath.

It just seems kind of silly the way it works... and it also seems a bit silly that you can't "turn off" inheritance. I mean, it's nice that children inherit parent styles and all, but what if I don't want to have to reset something in every single child that I only want to appear in the parent? Maybe it's just me. Deep breaths... work with the medium, not against it...

OK, I turned off the opacity, and the white looks fine. There is just one thing that is still bugging me, though...

[Edit: scrap all that--I think I may have just been an idiot...]

[Edit: Yes, we have a winner! Sometimes even I am amazed at the depths of my idiocy. As you were, gentlemen.]

[This message has been edited by Suho1004 (edited 02-26-2003).]

[This message has been edited by Suho1004 (edited 02-26-2003).]

Suho1004: An explanation might be nice for those following along at home

[edit: Ah sorry - I see you just scrapped opacity. I thought you'd fixed it.]

___________________
Emps

FAQs: Emperor

Yep, I decided to just stick with a 100% opaque background. As a final note, though, it appears that opacity is the only thing that gets muffed like this in CSS (everything else can be reset).

Most of the site was actually fine with about 80% opacity, but it was the images that was killing me. If I didn't have images to worry about I might have stuck with 80% opacity. The pure white looks very nice, though, and I don't feel I've made any concessions in design. I had an idea, I tried it out, and it didn't work out exactly the way I expected it to. Yes, maybe that was partly due to limitations in the way opacity is rendered, but I'm OK with that for now. Granted, it would be nice to find a solution to this, but I think that will have to wait for another day. In the meantime, I will take what I learned about opacity and store it away for future reference.

OK I dug the solution out of the back of my mind. The problem is (I believe) IE specific and sometimes it just gets a little grumpy with setting styles and it needs a boot in the pants to get things running smoothly (like life really) and the boot in the pants I usually resort to is position: relative and it makes things work here too. I used something like this in my quick test.

body {

background-color: #fff;

}



#mainDiv {

background-color: #c0c0c0;

filter: progid: DXImageTransform.Microsoft.Alpha(opacity=20);

height: 500px;

width:100%;

}



#nestedDiv { 

position: relative;

filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100); 

height: 250px;

width:100%;

}

You should be just a little careful as it might make some other browsers grumpy so make sure you keep an eye out for it.

[edit: Fix sneaky slimies]

___________________
Emps

FAQs: Emperor

Emps: just a quick update here. While the relative positioning may work on divs, it doesn't work on imgs. The problem with my page is that some of the imgs aren't in divs (I've applied the styles director to an img class). Granted, I could change the HTML to put them in divs, but this would mean I would have to change my other style sheets, and that's just too much of a pain in the neck for what is ultimately just eye candy.

My suggestion would be this: if you really want opacity on your page, plan for it from the beginning.