Jump to content

IE filter (I hate IE -_-)


shadowayex
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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."
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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. Edited by Fmdpa
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...