Question

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?

Answer 1

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