jQuery and CSS problem

[aparnesh]

I am a newbie at jQuery. I have a page with both a jQuery datepicker and jQuery tabs. I have changed the default settings of jQuery tabs CSS by overriding certain properties in a separate CSS file. The tabs are placed in a div (with an id = "ClassTabs") and the CSS specifies that the change should only be implemented within that id. But the default settings of the jQuery datepicker is also getting changed, even though it is outside the div.

Here's the CSS that I am overriding :

   #ClassTabs {
    width:200px; padding:5px; border:1px solid #636363;
    }
    #ClassTabs .ui-widget-header {
    border:0;  font-family:Georgia; 
    }
    #ClassTabs .ui-widget-content {
    border:1px solid #000; font-size:60%;
    }
    #ClassTabs .ui-state-default, #ClassTabs .ui-widget-content .ui-state-default {
    font-size:60%;
    }
    #ClassTabs .ui-state-active, #ClassTabs .ui-widget-content .ui-state-active {
    border:1px solid #aaa; 
    }

Here's the Code for the jQuery tabs

<div id="ClassTabs" style="margin-left:80px; width:90%">
        <ul>
            <li><a href="#ExtraCurri">Extracurricular</a></li> 
            <li><a href="#Discipline">Disciplinary</a></li> 
            <li><a href="#Leave">Leave</a></li> 
            <li><a href="#NCC">NCC</a></li> 
            <li><a href="#Family">Family</a></li> 
            <li><a href="#Address">Address</a></li> 
            <li><a href="#Guardian">Guardian</a></li> 
            <li><a href="#PrevSchool">Previous School</a></li> 
            <li><a href="#Misc">Miscellaneous</a></li> 
        </ul>
        <div id="ExtraCurri">Extra Curricular Records</div>
        <div id="Discipline">Disciplinary Records</div>
        <div id="Leave"></div>
        <div id="NCC"></div>
        <div id="Family"></div>
        <div id="Address"></div>
        <div id="Guardian"></div>
        <div id="PrevSchool"></div>
        <div id="Misc"></div>
    </div>
    <script> 
        (function($){
            $("#ClassTabs").tabs();
            }                    
        )(jQuery);
    </script>  
</div>

and the code for the datepicker, which is in a table, outside the "ClassTabs" div.

<td class="Dta"><input type="text" name="dtDOA" id="dtDOA" size="12">
    <script>             
        (function($){
            var dtDOAOpts = {
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-19:+0",
                    dateFormat: "dd/mm/yy",
                    minDate: "-19y",
                    maxDate: new Date()
                };
            $("#dtDOA").datepicker(dtDOAOpts);                                    
        })(jQuery);
    </script>
</td> 

I think as I am specifying that the overridden styles should only affect the elements that are within the div with id "ClassTabs", the default settings of datepicker should be unaffected. Unfortunately it is getting messed up.

Can anyone guide me as to where I am going wrong ?

[stbuchok]

Using the dev toolbar for your browser (IE dev toolbar, chrome's dev toolbar or Firebug for firefox), when the page is rendered, is the table rendered inside ClassTabs?