jquery-ui, Modal form and IE8 - php

Question

I have a table with userdata using:
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
and Christian Bach jquery.tablesorter-update
"jquery.tablesorter-update.js"
When using the demo version of "Modal form", Create new user on the same page as the table (form opens ontop of table),
it looks and works great in Chrome and Safari but the from is distorted in IE8.
Snippet from head:
<!-- CSS for table -->
<style type="text/css">
div#tableBody {
width: 100%;
padding: 0.3em;
font-size:x-small;
}
table {
width: 100%;
}
table th {
padding: 0.3em;
}
table th span {
float:right;
}
table tr.odd {
background-color: #FFFFFF;
}
div.ui-datepicker {
font-size:small;
}
</style>
<!-- jQuery UI Theme Start-->
<link href="../css/redmond/jquery-ui-1.10.1.custom.css" rel="stylesheet">
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-ui-1.10.1.custom.js"></script>
<script src="../js/jquery.ui.datepicker-sv.js"></script>
<!-- jQuery UI Theme End-->
<!--Christian Bach jquery.tablesorter-update Star-->
<script type="text/javascript" src="../scripts/jquery.tablesorter-update.js"></script>
<!--Christian Bach jquery.tablesorter-update End-->
<script language="JavaScript">
<!--
function DeleteItem(idurl)
{
go_on = confirm("Are you sure?");
if (go_on)
{
document.location.href=idurl;
}
}
// Tablesort
$(document).ready(function() {
// call the tablesorter plugin
$('#itemTable').tablesorter({
// sort on the first column and third column, order asc
locale: 'eu', widgets: ['zebra'], useUI: true
});
});
//-->
</script>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
var name = $( "#name" ),
email = $( "#email" ),
============= complete ripoff from jquery-ui modal form demo
Any suggestions?

Answer 1

I strongly suspect the issue is more the HTML and CSS than anything jQuery is doing because 1.9 is the last version to care about older versions of IE.
That said, I would advise - not just to solve this problem but any future problems with IE bugs - for you to look into a reset.css (okay, before I get stoned to death, it's a better idea to go with normalise.css these days, which you can find here: normalise.css
Admittedly that doesn't specifically tackle your problem, but I'd stick that in there because that will most likely fix your problem and any other potential IE issues.
That said, I'm not sure why you need to specifically set all those widths as a table will take up whatever room it can to fulfill it's 'needs' for width anyway.