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);
}

The last line there is the obvious call to the htc file you have to download, which you can get here.

A couple things to note:
1) Again, like the other one I talked about, the htc file is relative to the html file, NOT the css file. So either make it absolute from the domain root, OR, relative to the html file.
2) There are issues with static positioning and background images, which you can also read about here (I had to find this out the hard way with the other version I used). Easy solution is to make the target have position set to relative.

Other than that, this works like a charm. Works on IE6-8.

Conclusion

Usually I am not so into these types of things because you have to add a script to make it work. Not so here, and I see no reason for not implementing this in all of my projects. All you have to do is upload the file to your server, and you are done. Well other than making all the behavior calls to it in the CSS file.

Coupon Code: webmachine

var myMovies1 = ['Rocky','Better Off Dead','The Last Samurai'];
var myMovies2 = ['Goonies','Hangover','40 Year Old Virgin'];
$.merge( $.merge([],myMovies1), myMovies2);

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:

.roundedClass {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(images/border-radius.htc);
}

This being the important part:

behavior:url(images/border-radius.htc);

Where ever you are using the border-radius properties, you want the behavior added as well. Note that this does not work at all on anything in a form. So inputs, buttons, whatever…if it is in a form, I could not get this damn thing to work. Also, make the path in the behavior line relative to the document NOT the CSS file. Got it? If for instance, the .htc file is in the images folder and you are dealing with a root level document, then it would be images/border-radius.htc. If you have any questions about this, post a question in the comments section.

IE8 is not very nice – pay attention here!

I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:

<div class="roundedClass"><p class="textClass">This is the text that goes on top of the rounded corners div</p></div>

If you did this:

<div class="roundedClass">This is the text that goes on top of the rounded corners div</div>

Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.

To conclude

Have two wrappers (elements)…both positioned relative, the outer has the behavior and border-radius properties. Piece of cake. This works in IE6-8, and once I figured out the two wrappers and position relative thing, everything worked beautifully. Again, if you are still confused, ask away!

I will leave you with a quick tip. If you have multiple tabs open in IE8, press ctrl+q. It will show all the tabs you have open in one window, which you can then pick the one you want to view. Works kind of like Apple’s Expose. I wish I had known that a while back. It is actually a feature that they should have been promoting more. Especially considering that FF4 will have this feature now as well.

Coupon Code: webmachine

$('#wrapper').detach('ul');

<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();

The mind ‘bottling’ problem

If you are REALLY paying attention, this is not exactly the same code I used in my demo. Please be so kind, and view that link in IE7 or 8. IE6, won’t have the same thing going on there because I am using gif’s for that browser instead of png’s for everything else. Do you see how crappy that looks? Want to know why I didn’t write a new article last night? BECAUSE I WAS RESEARCHING INTO THIS FOR OVER 2 HOURS!!

(Oh, and if you didn’t look in IE7/8, the problem is that the drop shadows on the cogs and text are solid black instead of fading nicely into the background)

My big break

I used google like I have never googled before. My big break came from going to the jQuery IRC and finally asking everyone there if they knew what was wrong. Now, at the time, I new the name from reading his blog. What I did not know, was that Paul Irish is a jQuery Team Member. It was him who actually gave me a really good hint to how to work around this issue a little.

When he looked at it, he basically said nothing was wrong, that was just how IE works. Sux and sorry. I’m paraphrasing there, not actual quotes…this was late at night, and I didn’t have my Red Bull yet, so I can’t officially quote him. His little bit of help, even though I knew I didn’t have his full attention was, why not use something like .removeAttr() or something to get rid of the filter?

The Solution

That was when I used IE’s web developer tools and actually looked at the CSS. The stupid browser was putting the filter style on my divs with an alpha(opacity=100) for the value. I sure as hell didn’t put that there. So I tried everything with .removeAttr() to remove ‘style’ from it. All that did was take the opacity go away completely and show the divs right from the start. I still could not get that to work. So my little work around for IE was this line in the .animate():

'filter': ''

Which sets the value for filter to, well…nothing. That essentially takes the fading in gradually out of the game for IE. The cogs appear, and move left, but they don’t do the fade. This is as close as I could come in IE to what I wanted. Works great in Chrome, Safari, Opera, and Firefox, but IE kicked me in the face. I’m actually ok with that, because it is better than nothing, and I got to an acceptable point.

Conclusion

So, the overall lesson with PNG’s in IE7/8? They work fine as statically placed images, but they do not play nicely in a jQuery animation that changes the opacity. I don’t know the technical terms of what is going on behind the scenes, but I DO know that the filter style that IE adds is the problem. After all the searching I did last night, I do not believe there is a complete solution other than what I have done.

PLEASE correct me if I am wrong.

Coupon Code: webmachine

$('#myContainer').removeAttr('style');