Opacity not working on img in IE8 - css

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 */
}

Answer 2

Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.
To target the image specifically, add img after each of the css selectors; e.g.:
#shareActionsBox .shareActionLink:hover img
to target the image whenever the parent link is something (in this case when hovered).

Answer 3

I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.
Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.