Date picker cut off

Date picker cut off

When I use the date-picker and the following css, the date picker comes up "hidden" per the screen shot
 
 
 
Here is the css
 
<link type="text/css" href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" />
 
here is the html
 

<div id="headersc">
<span id="hC1R1">Date</span><span id="hC2R1"><input id="headersc_datereqs_1" name="headersc_datereqs_1" type="text" title="headersc_datereqs_1" size="11" maxlength="10"></span>
<span id="hC1R2">Type</span><span id="hC2R2"><input id="headersc_purctype_1" name="headersc_purctype_1" type="text" title="headersc_purctype_1" size="3" maxlength="2"></span>
<span id="hC1R3">Sole Source</span><span id="hC2R3"><input id="headersc_solesorc_1" name="headersc_solesorc_1" type="text" title="headersc_solesorc_1" size="2" maxlength="1"></span>
<span id="hC3R2">PO Number</span><span id="hC4R2"><input id="headersc_ponumber_1" name="headersc_ponumber_1"  type="text" title="headersc_ponumber_1" size="10" maxlength="10"></span>
<span id="hC6R1">Vendor Name</span>
<span id="hC7R1"><input type="text" id="headersc_vendname_1" name="headersc_vendname_1" type=text title="headersc_vendname_1" size="40" ></span>
<span id="hC5R2">Vendor ID</span><span id="hC6R2"><input id="headersc_vendorid_1" name="headersc_vendorid_1" type="text" title="headersc_vendorid_1" size="10" maxlength="10"></span>
<span id="hC7R2"><input id="headersc_venddesc_1" name="headersc_venddesc_1" type="text" title="headersc_venddesc_1" size="40" class="readonly" readonly></span>
<span id="hC5R3">Address</span><span id="hC6R3"><input type=text id="headersc_addrescd_1" name="headersc_addrescd_1" title="headersc_addrescd_1"  size="3" maxlength="2"></span>
<span id="hC7R3"><input type="text"  id="headersc_addressa_1" name="headersc_addressa" title="headersc_addressa_1" size="40" maxlength="40" class="readonly" readonly ></span>
<span id=hC7R4><input type=text  id="headersc_addressb_1" name="headersc_addressb" title="headersc_addressb_1" size="40" maxlength="40" class="readonly" readonly ></span>
<span id=hC7R5><input type=text  id="headersc_citystzp_1"  name="headersc_citystzp" title=csz_1 size=40" maxlength="40" readonly class="readonly" readonly ></span>
<span id=hC5R6>School/Dept</span><span id=hC6R6><input type="text" id="headersc_schooldp_1" name="headersc_schooldp_1"  title="headersc_schooldp_1" ></span>
<span id=hC7R6><input type=text id="headersc_schodesc_1" name="headersc_schodesc_1" title="headersc_schodesc_1" class="readonly" readonly ></span>
                                                      















</div>