Question

I have been trying very hard to achieve rounded corners with IE6+jquery ui tabs.

I have this page prepared: http://jsbin.com/uzoko (w/out dd_roundies)

Ofcourse, the rounded corners work in FF but not IE6. Because some of the properties used in CSS are specific to FF and Chrome.

I had asked this question yesterday and based on that suggestion I used the DD_Roundies library. However, the sample page I provided up top doesnt have the ability to add DD_Roundies library so I cant really ‘show’ what exactly is wrong with the page when it is openeing in css.

But after implementing DD_Roundies I can see the rounded corners in IE6 fine. HOWEVER, I have following problems:

1. ONLY the ‘First’ tabs seems to have rounded corners. When i click on second tab, it doesnt have rounded corners and so doesnt the third.
2. when I move away from First tab, it seems to have a border with color #990000.

All of this does not happen in FF @#$%@$!!

Since I am unable to put DD_Roundies library code in jsbin I will put what I have relative to dd_roundies on my page, here:

        DD_roundies.addRule('.ui-corner-all', '4px');
        DD_roundies.addRule('.ui-corner-top', '2px 2px 0px 0px');
        DD_roundies.addRule('.ui-corner-bottom', '0 0 4px 4px');
        DD_roundies.addRule('.ui-corner-right', '0 4px 4px 0');
        DD_roundies.addRule('.ui-corner-left', '4px 0 0 4px');
        DD_roundies.addRule('.ui-corner-tl', '4px 0 0 0');
        DD_roundies.addRule('.ui-corner-tr', '0 4px 0 0');
        DD_roundies.addRule('.ui-corner-br', '0 0 4px 0');
        DD_roundies.addRule('.ui-corner-bl', '0 0 0 4px');

I am not good at CSS to begin with and then correcting css so it works with freaking ie6 is whole another battle that I can use some help in. Please!

Also, as suggested in the question I asked yesterday, I tried using images as well. I used cornershop website to create two rounded corner images. http://tinypic.com/r/30j1rgz/5 and http://tinypic.com/view.php?pic=50joqq&s=5 but with these when I changed ‘Interaction States’ section of the css and property .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited to the following

background: #990000; 
font-weight: bold; 
color: #ffffff; 
text-decoration: none; 
outline: none;
background: url(nw.gif) no-repeat top left; 
background: url(ne.gif) no-repeat top right; 

then I got even weirder restuls 🙁

Answer 1

ok, after 2 hours of work, i gave up useing DD_roundies,

it just doesn’t work well with combination with the Tabs UI.

Then I tried another plugin which I know should work, and tested on:

IE6, IE7, FF3

all works well!

See demo here

I’ve also modified your CSS.

put the whole “Corner radius” section on comment. no need for that.

Hope this suits your needs 🙂