> > Problem is that if I do it like this, the text in the ul also has the > > opacity applied. That's not supposed to happen. > > Actually, that *is* supposed to happen. Opacity affects the entire element > and all its children.
Is there a way around that? I've tried specificity tricks and !important but they didn't work I have a page that is designed to make it easier to crop images to a specified size and aspect ratio. I do this by having the original image as a background, and a div of the right size shape, and border inside that div. When the inner box is moved its background-position is set so that it stays in step with the larger image around it. What I wanted to do was have the bit that isn't bounded by the box greyed out slightly, so theres a visual indication that its not being used. So I set a grey background, and set the opacity of the large image to be 0.5. Then I had hoped to set the opacity of the smaller bounding box to be 1.0, but that doesn't work. Though in IE it does. This is what I had hoped it would do, if you look at it in IE, then the effect works quite nicely. http://www.sampartington.co.uk/imagecropper/?skip_opacity_hack As a work around for non-IE browsers I create a darker image for the background on the server, and deliver that instead, and leave out the opacity rules. (It loads significantly slower as a result) Here you can see the workaround : http://www.sampartington.co.uk/imagecropper/ I suppose the obvious solution is to have the inner div not be a child of the outer div, but it makes the positioning a lot more complicated. Any ideas anyone? Sam ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
