Posts Tagged ‘IE’

CSS PIE: CSS3 styles for IE – easy to use and awesome

Tuesday, August 3rd, 2010
CSS PIE: CSS3 styles for IE – easy to use and awesome

Flash back to…

A little while back I wrote an article about getting border-radius working in IE. Well, if you haven’t been keeping up in the blogging world, I came across CSS PIE. It basically does the same thing, only more. If you use things like box-shadow, linear-gradients, AND border-radius, then this is the version you will want to use. Basically the same call in the css file:

.myClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px #000000;
behavior: url(/PIE.htc);
}

(more…)

Getting border-radius to work in IE

Tuesday, July 27th, 2010
Getting border-radius to work in IE

Border-radius on IE? That is just crazy!

It’s funny how many things from my job come up as posts. Well, I guess not funny, because I end up working on things that I am not familiar with and have to fix. Which is the case tonight. I’m not sure if you have read any articles, but there are plenty, about getting the CSS3 property border-radius to work in IE. It is actually rather easy, so let’s get to it, and I’ll show you how!
Actually, I’ll tell you how. And then I’ll tell you some of the troubles I ran into.

Wait, that’s it?

So getting your rounded corners is pretty damn easy. There are three things you have to do:

1) Go here and download the htc file.
2) Place the downloaded file in your images folder
3) In your CSS file, on the style that you want the rounded corners you add something like this:

(more…)

IE PNG problem when used with jQuery animate()

Friday, July 2nd, 2010

FREAKIN’ AWESOME UPDATE – 08/24/11: It appears this problem is now fixed (mostly?). HUGE shout-out to Micah Topping (a commenter below) for giving the link for this. If you now look at my cog animation above in IE7/8, this now works as I want it to, with no apparent differences. I did have to place the images within the divs rather than use a CSS background.

<div id="myWrapper"><img src="images/myImage.png" /></div>

And the CSS:

#myWrapper img {
background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;
}

One finaly note….I DID have to take this out of my script that I am using or it wouldn’t work. It was overwriting the filter being put on by the CSS (full script shown further down):

'filter': ''

Even more applause goes to Dan Tello who gave the solution here. I tried the jquery script that was provided there, but I could not get that to work.

END OF UPDATE!

Before I go into what I want to talk about tonight, I need to first toot my own horn a little. I received an email from one of the editors over at onextrapixel.com, inviting me to be a guest writer. Now who knows what will happen with that, but I am extremely excited and honored that they would ask me. I put a lot of work into The Web Machine, so I am just a little bit proud that they would ask me. I am nervous, but in a good way. Here, I can write how I want because its my blog. There, I just hope I don’t embarrass myself. Wish me luck, and I’ll keep you informed of what happens. Seriously, thanks to onextrapixel.com for asking. You made this blogger/web developer very happy just by doing so.

Now…FORWARD! Onto the meat of the post! I should warn you though, that it is partly a story too.

If you have been paying attention here, and reading my posts, you will notice I implemented an animation on my logo using jQuery. I’m quite proud that I got this to work with so little code. Or, at least that was what I thought. The main goal was to fade in the cogs one at a time in sequential order while moving them a certain distance to the left. Just for a refresher, here is the code again:

var cogs = $('#cog1, #cog2, #cog3, #cog4, #cog5').css({'opacity' : 0});
	i=0;
	leftAmount = 0;
 
	function cogMovement () {
		$(cogs[i++]).animate({
				'left': 63 * leftAmount++,
				'opacity': 1,
				'filter': ''
			}, 800, arguments.callee);
 
	};
	cogMovement();

(more…)