Hi, I am currently working on producing a web page and I have hand coded the HTML tables that produce the design of the web page. I created this in firefox to make sure my code validates in XHTML. however if I load the same page in IE the TD's appear squashed and the design looks bad.

Below is the HTML code that I used to develop this web page:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="ss_styles.css"/>
</head>
<body>
<table border="0" width="100%">
<tr>
	<td><img src="logo.jpg" border="0" /></td>
</tr>
</table>
<table id="maintable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="5%">&nbsp;</td>
<td width="5%">&nbsp;</td>
<td width="15%">&nbsp;</td>
<td width="50%">&nbsp;</td>
<td width="15%">
<span class='login'>
Logged in as <?php $_SESSION['valid_user']." ?>
</span>
</td>
<td width='5%'>&nbsp;</td>
<td width='5%'>&nbsp;</td>
</tr>
<tr>
<td width='5%'>&nbsp;</td>
<td id='topleft' width='70' height='70'>&nbsp;</td>
<td id='topbar' width='80%' colspan='3'>&nbsp;</td>
<td id='topright' width='70' height='70'>&nbsp;</td>
<td width='5%'>&nbsp;</td>
</tr>
<tr>
<td width="5%">&nbsp;</td>
<td width="5%" id="leftbar">&nbsp;</td>
<td width="15%">
<table border="0">
<tr>
<td><a href="admin.php">Home</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">League Table</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="insert_data_form.php">Add</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="delete_data_form.php">Delete</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">League Information</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">Tournament Information</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Add</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Delete</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">Goalscorer Information</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Add</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Delete</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="logout.php">Logout</a></td>
</tr>
</table>
</td>
<td colspan="2" width="65%">
<table border="1" width="100%">
<tr>
</td>
<td width="5%" id="rightbar">&nbsp;</td>
<td width="5%">&nbsp;</td>
</tr>
<tr>
<td width='5%'>&nbsp;</td>
<td width='5%' id="bottomleft" height="70">&nbsp;</td>
<td width='80%' colspan='3' id="bottombar">&nbsp;</td>
<td width='5%' id="bottomright" height="70">&nbsp;</td>
<td width='5%'>&nbsp;</td>
</tr>
<tr>
<td colspan="7" align="center"><p class="footer">&copy; <?php $date1 = date('l jS'); $date2 = date('F Y'); echo $date1." of ".$date2;?> Konyaruddo</p></td>
</tr>
</table>
</body>
</html>
This is the CSS that is involed with this HTML:

Code:
#topbar {
	background-image: url('top.jpg');
	background-repeat: repeat-x;
}
#topleft {
	background-image: url('top_left.jpg');
	background-repeat: no-repeat;
	background-position: left top;
}
#topright {
	background-image: url('top_right.jpg');
	background-repeat: no-repeat;
	background-position: right top;
}
#bottomright {
	background-image: url('bottom_right.jpg');
	background-repeat: no-repeat;
	background-position: right bottom;
}
#bottomleft {
	background-image: url('bottom_left.jpg');
	background-repeat: no-repeat;
	background-position: left bottom;
}
#leftbar{
	background-image: url('left.jpg');
	background-repeat: repeat-y;
}
#rightbar{
	background-image: url('right.jpg');
	background-repeat: repeat-y;
	background-position: right;
}
#bottombar{
	background-image: url('bottom.jpg');
	background-repeat: repeat-x;
	background-position: bottom;
}
p.footer {
	font-family: arial, verdana, helvetica;
	font-size: 9pt;
}
span.login {
	font-family: arial, verdana, helvetica;
	font-size: 9pt;
}
#maintable {
	empty-cells:show;
}
.adminheaders {
	font-family: arial, verdana, helvetica;
	font-size: 9pt;
	font-weight: bold;
}
I have to apologise if this code is really lengthy but I wanted to include all of the HTML and CSS involved as i wanted anyone that is reading this to be aware of any possible dependencies.

I have tried reading across forums and performed google searches on this problem but I cannot figure this problem out. Any help regarding this would be greatly appreciated.