UI Slider inside TD overflows vertically

UI Slider inside TD overflows vertically

I used the UI selectToUISlider plugin (downloaded at http://www.filamentgroup.com/lab/update ... a_support/ along with jQuery) to create a slider input from a select input inside a table. Instead of the tic marks being inside the slider box and the labels horizontally underneath, the OL overflows vertically:

Image
How it should look



Image
How it does look


The overflow is not visible when "overflow:hidden;" is set on the TD, and it still shows up when the height of the TD is increased.

I know that these inputs shouldn't be in a table, but that's the way Roundup did it and I don't want to completely rework the page. Does anyone have any ideas on this?

HTML for the section after the slider is made:
<th class="required">Priority</th>
<td id="priority_td">
<select id="priority" name="priority" style="display: none;">
</select>
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" role="application">
<a id="handle_priority" class="ui-slider-handle ui-state-default ui-corner-all" aria-valuetext="- no selection -" aria-valuenow="0" aria-valuemax="4" aria-valuemin="0" aria-labelledby="undefined" role="slider" tabindex="0" href="#" style="left: 0%;">
<span class="screenReaderContext"/>
<span class="ui-slider-tooltip ui-widget-content ui-corner-all" style="display: none;">
<span class="ttContent">- no selection -</span>
<span class="ui-tooltip-pointer-down ui-widget-content">
</span>
</span>
</a>
<ol class="ui-slider-scale ui-helper-reset" role="presentation">
<li style="left: 0%;">
<span class="ui-slider-label" style="margin-left: -7px;">-1</span>
<span class="ui-slider-tic ui-widget-content" style="display: none;"/>
</li>
<li style="left: 25%;">
<span class="ui-slider-label" style="margin-left: -4.5px;">1</span>
<span class="ui-slider-tic ui-widget-content"/>
</li>
<li style="left: 50%;">
<span class="ui-slider-label" style="margin-left: -4.5px;">2</span>
<span class="ui-slider-tic ui-widget-content"/>
</li>
<li style="left: 75%;">
<span class="ui-slider-label" style="margin-left: -4.5px;">3</span>
<span class="ui-slider-tic ui-widget-content"/>
</li>
<li style="left: 100%;">
<span class="ui-slider-label" style="margin-left: -4.5px;">4</span>
<span class="ui-slider-tic ui-widget-content" style="display: none;"/>
</li>
</ol>
</div>
</td>