As you can see on my site http://bit.ly/wLK5b7 in Chrome and Firefox I have the container of the page set to white and a bit transparent, however the same effect does not come out the same on IE, it is very dark. How can I fix that? Thanks
That should work in the latest IE (not sure about IE8 …) but an alternative might be to use a semi-transparent png instead of the bg color. I’ve certainly done that in the past.
BTW, that big background image takes a long time to load. At 968kb, it’s way too large. You should be able to gt that down a lot by using Save for Web in Photoshop or similar.
Or you can do cross browser with rgba http://www.visibilityinherit.com/code/modern-css-opacity.php
Thanks fixed
There’s a problem with that in legacy IE – ALL of the DIV’s content is fed that transparency, not just the background; in most cases you’d be better off simply doing:
background:rgb(166,166,166); /* IE6/7/8 /
background:rgba(166,166,166,0.7); / Modern Browsers */
and forgetting the transparency on people who can’t pull their heads out of 2001’s backside… applying an opacity filter effects EVERYTHING in that DIV, so it’s not exactly a great replacement for RGBA. Usually I just run the RGBA first in a modern browser, screencap it and take a median color, and use that as the color declaration before it. “close enough” in most cases.
Or just don’t use transparencies as they often make text hard to read anyways… probably why my most common use of transparency is for hover effects on IMG tags.
Hello. Unless I’m missing your point you just feed legacy IE position relative to the inner elements and that fixes the inherited opacity.
Yes position:relative on inner elements will stop the transparency from affecting that content in legacy IE.
My bad, didn’t know that… I’ve just avoided opacity and filters because of that issue… that’s an odd behavior; but then we are talking IE…
Shame every other browser doesn’t do that with opacity… though with my minimalism of markup, I often don’t have those inner elements unless you know some way to style textnodes…
No problem. 