HTML Select cutting text off - html

Question

Ok, as usual, I come here as a last resort after pulling what's left of my hair out and not finding the solution online.
Have a simple table with one row and three cells. Inside two cells are fieldsets (I like the look) containing a <select> and two buttons. Everything looks as I want it, except that the text for the options are cut off.
I've tried resizing the select, but can't find any reference on resizing the option itself.
What am I doing wrong?
The HTML:
<div id='tabs-1' style='width: 95%;'>
<table style='width: 98%; margin-left: auto; margin-right: auto;'>
<tr>
<td style='width: 33%;text-align: center;'>
<fieldset style='height: 300px;width: 90%;'>
<legend>Manual</legend>
<br>
<div style='text-align: center;'>
<a href="#" onclick='getPage("SheriffManual")' target="_self">
<img src="images/manualIcon.jpg" alt='Manual' height="65">
<br>
Sheriff's Policy and Procedure
</a>
</div>
</fieldset>
</td>
<td style='width: 33%;text-align: center;'>
<fieldset style='height: 300px;width: 90%;'>
<legend>Memorandum</legend>
<br>
<div style='width: 100%;" text-align: center;'>
<select style='width: 90%;' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
<option value='memorandum/MINIMUM APPLICANT STANDARDS FOR DETENTION, PEACE OFFICERS AND TELECOMMUN.pdf'>Minumum Applicant Standards</option>
<option value='memorandum/Memorandum EMPLOYEE SMOKING AREAS.pdf'>Employee Smoking Areas</option>
</select>
<br><br>
<div style='float: left; margin-left: 75px;'>
<button>View</button>
</div>
<div style='float: right; margin-right: 75px;'>
<button>Download</button>
</div>
</div>
</fieldset>
</td>
<td style='width: 33%;text-align: center;'>
<fieldset style='height: 300px;width: 90%;'>
<legend>Directives</legend>
<br>
<select size='8' style='width: 90%' id='selSheriffDirectives' name='selSheriffDirectives' value=''>
<option value='directives/SHERIFFS DIRECTIVE NO 2015-09-01 WORK PLACE VIOLENCE.pdf'>Workplace Violence</option>
<option value='directives/Directive ANNUAL TUBERCULOSIS SCREENING.pdf'>Annual Tuberculosis Screening</option>
<option value='directives/Sheriffs Directive No. 02-03 - Bereavement Leave.pdf'>Bereavement Leave</option>
<option value='directives/SHERIFFS DIRECTIVE Mental Health Pre-Screening and Diversion NO 2015-01.pdf'>Mental Health Pre-Screening</option>
</select>
<br><br>
<div style='float: left; margin-left: 75px;'>
<button>View</button>
</div>
<div style='float: right; margin-right: 75px;'>
<button>Download</button>
</div>
</fieldset>
</td>
</tr>
</table>
</div>
The result:
UPDATE: I took out all the CSS and javascript for the page, and the select renders as expected. After putting everything back in, I realized that it was jquery.ui.js causing the problems -- I'm using jquery's tabs and it's setting the <select> option width the same as the tab widths. Now I just have to find out what/how I need to override jquery.

Answer 1

How about adding a scrollbar to your select elements?
<select style='width: 90%; overflow: scroll' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
...
</select>

Answer 2

Turns out there's a simple fix (courtesy of Select box truncating text when body font size changed via javascript on document ready in IE 9):
$('select').append(' ');
Forces the select to be redrawn.

Answer 3

Change the height or padding of <option>
option {
height:8px;
padding:8px;
}