Jquery Rounded Tabs Cross Browser (slight problem)

Ive been trying to create some rounded tabs without images which work in all browsers, ive taken various code from different places and nearly got it working, the only problem is that the tab background color doesnt stay white when the tab is active. Ive been trying to fix this for hours with no luck. It uses csspie for the rounded corners, you can view an example on the page here :

http://www.usedcar.co.uk/test开发者_StackOverflow社区tabs.html

Any help would be appreciated. I havent managed to find a decent example of jquery tabs without images.

---

Remove the extra curly brace it's bugging your code out...

    behavior: url(/pie/PIE.htc);}
}

EDIT: here are the demos...

Working: http://jsfiddle.net/j6sF5/1

Not Working: http://jsfiddle.net/j6sF5/2/ (extra curly brace)

---

Here is a working version: http://jsbin.com/afina3/8/edit

Made two changes. The first was to move the selected style above the .tabBox .tabs a style:

.tabBox .tabs .selected a {
    background: #FFF;
}

.tabBox .tabs a {
    float: left;
    height: 3em;
    line-height: 3em;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    background: #EEE;
    border: 1px solid #BDBDBD;
    border-bottom: 0;
    padding: 0px 15px;
    color: #000;
    font-size:12px;
    text-decoration: none;
    behavior: url(/pie/PIE.htc);}
}

Then in the jQuery code I added this line to add the selected style to the tag of the tab:

$(this).find('a').addClass("selected"); //add selected style to the link of this tab

---

You can either fix this in the click event, or in css(preferably in css). click:

 $('.selected a').css('background-color', 'white');

or in css, something like

.selected a{background-color: white;}

in your css you have:

.tabBox .tabs .selected a {
    background: #FFF;
}

EDIT(Your css behavior 'PIE.htc' is causing you problems): At the end of on click add:

$(".tabBox .tabs li").click(function() {
    $(".tabBox .tabs li").removeClass("selected"); //Remove any "active" class
    $(this).addClass("selected"); //Add "active" class to selected tab
    $(".tabBox .content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).show();
//add-->
    **$(".tabBox .tabs").find('li[class!=selected]').find('a').css('background-color', '#EEE');
    $(this).find('a').css('background-color', '#FFF');**

    return false;
});**strong text**

---

.tabBox .tabs a:hover,
.tabBox .tabs a:active,
.tabBox .tabs .selected a {
    background: none repeat scroll 0 0 #FFFFFF;
}

Should fix it :)