In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves upwards, eventually blocking one of the drop-downs. However, when I hover over the button, it unexpectedly moves down the page a few centimeters. This behavior occurs regardless of the size of the list, and I am unable to determine why or how to prevent it.
JQuery:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
$(document).ready(function(){
$("#createReport").button({
icons: {
primary: "ui-icon-document"
}
});
});
</head>
Table:
<table style="width:600px;table-layout:fixed;"><tr>
<td style="height:10px;background-color:#3882C7;color:#FFD23A;"><b>Create New Reports</b></td>
<td style="height:10px;background-color:#3882C7;color:#FFD23A;"><b>Reports Completed for this Month - <span id="section"></span></b></td></tr>
<tr>
<td style="padding:20px;">
<p>Court: <select id="newReportsDD">
<option>Criminal</option>
<option>Civil</option>
<option>Family</option>
<option>Business</option>
</select></p>
<p><?php echo judgesDropDown('newReportsJudgeDD'); ?></p><br/>
<p><button id = "createReport">Create/Edit Report</button></p>
</div></td>
<td style="padding:10px;"><div id ="judgesCompleted"><!-- LIST GENERATED VIA AJAX --></div>
</td></tr>
</table>