Question

THIS PROBLEM IS NOW FIXED

see updated css below.

I currently have:

$("form#FanDetail").serialize(),
                    function(){
                        $('form#FanDetail').hide(function(){
                            $('div.success').fadeIn();
                            // setup for next tab: [about]
                            $('li#about').removeClass('selected').addClass('Unselected'); // remove about bg, replace with gray bgColor
                            $('li#contact').removeClass('Unselected').addClass('selected'); // add bg, replace with red bg
                        });

Answer 1

Css for .selected and .Unselected is as follows:

    #editProfileNav ul li.selected{         /* here */
        width:86px;
        height:40px;
        padding:0px;
        margin:0 1px 0 0;
        background-image:url('../img/SeleBox.png');
        float:left;
        list-style-type:none;
        list-style:none;
    }

    #editProfileNav ul li.Unselected{
        width:86px;
        height:40px;
        padding:0px;
        margin:0 1px 0 0;
        background-image:url('../img/unSeleBox.png');
        float:left;
        list-style-type:none;
        list-style:none;
    }
    /*       was originally  using this and it was overwritting above css for `.unselected`                     
    #editProfileNav ul li a{
        width:86px;
        height:40px;
        padding:0;
        margin:0 1px 0 0;
        background-image:url('../img/SeleBox.png');
        float:left;
        list-style-type:none;
        list-style:none;
    }
    */

#editProfileNav ul li a{} was overwritting #editProfileNav ul li.selected{} CSS since it was the LAST called in the Css doc.