Question

I have code that works in Chrome and Firefox, but not in IE8.

    <a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>

The CSS for this is:

    .shareActionLink:link, .shareActionLink:visited
{   
    margin-right:8px;
    color:#999;
    opacity:0.6;
    filter: alpha(opacity=60);  /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
    background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
    color:#333;
    text-decoration:none;
    opacity:1.0;
    filter: alpha(opacity=100);  /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}

Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn’t change in IE. It works fine in other browsers.

I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??

Thanks

Answer 1

MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you’re trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE’s as it works to set hasLayout for IE7 and also keeps IE8 happy

.shareActionLink {
    display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {   
    margin-right:8px;
    background: #fff;
    color:#999;
    opacity:0.6;
    filter: alpha(opacity=60);  /* IE */

}

.shareActionLink:hover {
    color:#333;
    text-decoration:none;
    opacity:1.0;
    filter: alpha(opacity=100);  /* IE */
}