Opacity CSS not working in IE8
css, internet-explorer-8, opacity
Solution
No idea if this still applies to 8, but historically IE doesn't apply several styles to elements that don't "have layout."
see: http://www.satzansatz.de/cssd/onhavinglayout.html
Problem
I'm using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that the text has a click action. This works fine in Firefox and Chrome, but in IE8 the opacity doesn't change. I've tried a variety of CSS settings without any success. For example HTML: ``` <h3 class="slidedownTrigger">This is the trigger text</h3> ``` CSS: ``` .slidedownTrigger { cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; } ``` What's stopping IE changing the opacity? Note: I've tried this on a variety of different elements, swapping round the order of the CSS statements, and just using the IE ones on their own. I've also tried using ``` -ms-filter: "alpha(opacity=75)"; ``` but with no success. I've run out of things to try to get opacity modification working in IE8. Any ideas?