thescientist Posted June 19, 2009 Share Posted June 19, 2009 for a site I'm designing, in FF everything inside this div is taking on the transparency setting of the div. In IE (7), only the div is transparent and the elements inside it display as normal (which is how I want it). Any thoughts on a workaround for this? If you need my code I can post it. Link to comment Share on other sites More sharing options...
pizzaguy Posted June 19, 2009 Share Posted June 19, 2009 So you want the elements inside the transparent div to have a different transparency? Have you tried just setting the transparency level for each element individually? Link to comment Share on other sites More sharing options...
thescientist Posted June 20, 2009 Author Share Posted June 20, 2009 nope. I just want the white box they're in to be transparent. For some reason in FF, it seems all elements inside that div are inheriting the transparency as well. Although your suggestion seems doable, opacity is not currently a standard, and I don't want to clutter up my stylesheets with extra non-standard markup if I can help it. I'm not sure if that's weird, but I would prefer to keep my pages as close to validating as possible. As of now, the effect is only being used once a page. Link to comment Share on other sites More sharing options...
jeffman Posted June 20, 2009 Share Posted June 20, 2009 One extra line of CSS. Use the universal selector as a descendant selector:this represents the definition you already havediv.trans {opacity: 0.4}simply add this linediv.trans * {opacity: 1.0}Now everything that is inside div.trans is un-opaque. Link to comment Share on other sites More sharing options...
thescientist Posted June 20, 2009 Author Share Posted June 20, 2009 One extra line of CSS. Use the universal selector as a descendant selector:this represents the definition you already havediv.trans {opacity: 0.4}simply add this linediv.trans * {opacity: 1.0}Now everything that is inside div.trans is un-opaque.i figured it would be something like that, but it does not work. In all fairness, I have been doing a lot of work recently, considerably in the stylesheet realm, so perhaps that is why your suggestion is not working. I have uploaded the most current versions of my page and style sheets.www.seasonsnh.com/newsite_test Link to comment Share on other sites More sharing options...
Ingolme Posted June 20, 2009 Share Posted June 20, 2009 Opacity applies to the element and everything inside it. That's how it works. If you want a semi-transparent background in standard compliant browsers, use a transparent PNG file (1x1 pixels if you just want a color). Link to comment Share on other sites More sharing options...
thescientist Posted June 20, 2009 Author Share Posted June 20, 2009 Opacity applies to the element and everything inside it. That's how it works. If you want a semi-transparent background in standard compliant browsers, use a transparent PNG file (1x1 pixels if you just want a color).ok, let me see if I follow you. So if I want just my white box to be transparent, are you saying I should just use a .png file and set it as the div's background and use photoshop to adjust its opacity? Link to comment Share on other sites More sharing options...
jlhaslip Posted June 20, 2009 Share Posted June 20, 2009 yes, otherwise, as you discovered, the contents of the transparent div also become transparent. Link to comment Share on other sites More sharing options...
Synook Posted June 20, 2009 Share Posted June 20, 2009 ok, let me see if I follow you. So if I want just my white box to be transparent, are you saying I should just use a .png file and set it as the div's background and use photoshop to adjust its opacity?Yes Link to comment Share on other sites More sharing options...
thescientist Posted June 20, 2009 Author Share Posted June 20, 2009 word. thanks guys. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.