IE filter (I hate IE -_-)

[shadowayex]

So, let's get this train-wreck over with. I have one image of an arrow. Instead of flipping it and saving a new image, I thought to myself "To make my site more efficient (especially for mobile users), I could just use the same image and flip it with CSS!" ...I have a method for "disabling" these arrows, in which I use CSS to adjust the opacity of the image to 40%.And so it began.Here if the CSS I'm using (note, the image has the arrow pointing right, and I gave the "left one" an id of "left-arrow"):

#left-arrow{	-moz-transform: scaleX(-1);	-webkit-transform: scaleX(-1);	-o-transform: scaleX(-1);	transform: scaleX(-1);	filter: fliph; /*IE*/}img[src="arrow.png"].disabled{	cursor: default;	opacity: 0.4;	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; // first!	filter: alpha(opacity=40);}

I won't even mention IE7, because even if I got this to work in 7, there are many other things that still don't. IE8, however, this is the only broken thing. I can get it to perform the fliph and the opacity separately, but not both at the same time. I don't know why they refuse to play nicely, but they just won't.If someone can help me figure out what's going on so I can get this nearly derailed train securely on track, I would be very, very grateful.P.S.: Did I mention I hate IE?

[thescientist]

what about just using the :hover psuedo class?

[shadowayex]

what about just using the :hover psuedo class?

It's not a hover...I have JavaScript that sets the class name to "disabled" when the arrow needs to look "disabled", and then the image is supposed to get slightly transparent to look "disabled."

[Fmdpa]

Have you looked into creating arrows with CSS? http://net.tutsplus.com/articles/news/fun-with-css-shapes/I used that technique to display arrows to navigate through my photo gallery. example

[shadowayex]

Have you looked into creating arrows with CSS? http://net.tutsplus.com/articles/news/fun-with-css-shapes/I used that technique to display arrows to navigate through my photo gallery. example

That would be a good solution, but I'm doing this project for someone and they want the image. It's all fancy and whatnot. I might just have to save a flipped version and load two images, since IE can't handle applying two of their properties at the same time.

[Fmdpa]

I might just have to save a flipped version and load two images, since IE can't handle applying two of their properties at the same time.

Yeah, that's what I would do. This is one situation where it's probably not best to rely on CSS 3.

[Ingolme]

It can apply two filters at the same time, but they must be within the same filter declaration:

filter: fliph, alpha(opacity=40);