Opacity Issue with IE8

[rsmith]

I know there are tons of threads on this and I've done a lot of searching on Stack Overflow but no matter what combination of attributes I use, the thing looks horrible in IE8.

Here's the navigation image without any mouseover:

Here's what the correct hover looks like in browsers except for IE8

And here's what the IE8 Abomination does

Here's the relevant CSS

.navigation img:hover{
	opacity: 0.5; 
	filter:alpha(opacity=40); 
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}

Anyone? Bueller? 😃

[Bonesnap]

It has always been my understanding that vendor-specific properties are listed before the actual standard. Try this approach (taken from CSS Tricks):

.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}

[rsmith]

Here's my revised CSS that has not corrected the problem

.navigation img:hover{
	zoom: 1;
	width: 100%;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
	filter:alpha(opacity=40); 
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-khtml-opacity: 0.5;
	opacity: 0.5;	
}

Any other ideas? Thanks for the previous post's advice.

[cretaceous]

I had this problem a while ago but can't remember where exactly (my memory being not so good). I'm pretty sure there is no fix so I just had the hover use a different png. Not ideal but fixes it.

[rsmith]

I wonder if taking the png that I use now and removing the background color so the image itself is already transparent png? Could it be that it's having trouble rendering the background color opacity? It's weird. I could understand the bug more if the text had a drop shadow applied but it's just a solid color.

[Bonesnap]

bradgrafelman;11004934 wrote:

Careful with transparent PNGs; back when I did web development regularly, I started getting comments about how said images looked odd in IE. Apparently, IE didn't know what a "transparent" PNG was. (Although surely that's changed by now...)

Of course, back when I did web development regularly, I also said to hell with IE - if you're using such a lame browser, you deserve to have a lame web experience. :p

IE understands transparent PNGs after IE6; however, it does have issues with making some things transparent dynamically. We've had to take weird measures to "counteract" IE's ridiculous behaviour. This doesn't (at least in my company's experience so far) happen with IE9.

[rsmith]

The issue only exists with IE8 and my images.

[jeepin81]

have you seen this thread on stackoverflow?

http://stackoverflow.com/questions/1251416/png-transparency-problems-in-ie8

I could not personally replicate the issue, so I wasn't able to test this but I saw a few threads referencing this fix. I also did a search for 'black halo IE8' and found similar solutions.

I run vmware w/ windows 7 and I have IE9 and attempted using the 'developer tools' and browsing in IE8 & IE7 and couldn't see the black halo. I also tried png-8 vs png-24 and everything rendered correctly w/ your supplied code.

one other thought - did you set the border to zero?

@ I completely agree! IE is the worst. I cannot believe how many people still use it. Lucky me, my boss uses IE8 w/ a resolution of something like 600x900 0_o

[rsmith]

Here's the full html markup for the about button:

<a href="about.php" id="navAbout"><img src="/images/nav_about.png" width="90" height="39" title="about" alt="about" border="0" /></a>