How do I make jQuery UI look better in IE?

Question

I've read the css framework of jquery ui:

http://jqueryui.com/docs/Theming/API

And find some of the css settings is not valid in IE:

.ui-corner-all {
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
}

Is there some way to fix this kind of situation?

Answer 1

border-radius just isn't valid IE. You have two options:

1. Accept that better browsers will give a better result
2. Forget about modern CSS and use background images to create rounded corners.

See the Wikipedia pages on Progressive enhancement and Graceful degradation.

Answer 2

There are some ways to fake IE into using some of the fancy new CSS3 properties.

This site explains how to do it, if you're only interested in rounded corners, per your example.

Answer 3

This css is not valid for the IE, you will have to use images to create rounded corners instead.

Answer 4

I find this interesting. I just finished reading a design blog the other day that pointed out that there is definately a false bit of logic going on in web design circles.

That falsehood is that web sites should look the same in all browsers. Let's be honest, IE 6 was released in, what, 2001? It is nearly a decade old. It seems pretty absurd for clients to expect support for a 9 year old system that was deficient and buggy upon release.

I no longer support IE6 on my personal web projects, and this is not at all an uncommon posture to take nowadays. Check any Gawker media blog, you can't even comment if you don't have higher than IE6.

Now, some clients have the need for IE6 compatability. For instance, my workplace is locked to IE6 for enterprisey reasons, and until certain vendors upgrade and allow IE7+, then 6 is what we must use. However, I would not obsess over eye candy for IE6 users. I would encourage them to upgrade if possible, or else just tell them certain features cannot be supported. Especially if we're just talking about cosmetics.

That said, Curvy Corners is a JQuery plugin that looks for those proprietary CSS declarations, and will create image free curved corners in IE6. Be warned that there is a significant ammount of DOM manipulation going on, so it will slow down pages that have a lot of rounded corners.