how to work with jquery UI tabs in IE 6

Question

I am not very good with css but with lot of trial and error I made this page that has jqueyr UI tabs and looks somewhat decent: http://jsbin.com/uquvi

However, When I open this page in IE 6, to my disappointment the tabs dont seem to have curved corners.

At work right now they have a very bad implementation of tabs because they are creating tabs with tags and it just looks messy. Also, they are currently achieving curved tab corners by having two gif images. I had seen jquery UI tabs in many blogs so decided to run with it but now I am problems.

can someone please have a look at the page and tell me how to correct this for IE 6?

Answer 1

You are using

 -moz-border-radius-topleft: 4px;
 -webkit-border-top-left-radius: 4px;

both properties are custom for Firefox and webkit (Safari and Chrome)

If you want rounded corners in IE you have to do them with background images.

In this Matt Berseth blog post you will find example how to do it, but basically you have to assign a background image with the rounded corner to the tab.

Another way to do it in this link

BTW, the html of the web page your are referencing is very messy, with two html, body and head tags

Answer 2

See the answer on this post.

http://stackoverflow.com/questions/3364946/jquery-ui-tabs-rounded-tab-corners-in-ie