JQuery UI Button Moves Around on mouseover
I have a table with two large cells, the left cell containing two drop-downs and the JQuery UI button that I'm having trouble with, and the right cell contains a list that's generated from an AJAX database query. As the list grows, the button moves further and further upwards, to the point where it begins to block one of the drop-downs. When I mouse-over the button, it moves down the page a few centimeters. No matter how big the list is, this button always moves down upon mouse-over, and I can't figure out why or how to prevent this from happening.
JQuery:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="css/custom-theme/jquer开发者_如何学运维y-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"><!-- AJAX GENERATED LIST --></div>
</td></tr>
</table>
<td id="container" 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>
#container {vertical-align: top; text-align: left;}
加载中,请稍侯......
精彩评论