Hello All.
im having trouble coding the css properly to display a resizerble horizontal menu which evenly sizez to what ever size of browser from 800 X 600 up.

I have successfully done it on IE without a doctype here

but when i put the doctype in or in firefox (with or without doctype) i just bunches together in the middle like this here

Can anyone please tell me were im going wrong.??? i down loaded this menu form the css libary on dynamic drive and made some edits to work for my site, but i hust cant make it space evenly??!?!?!??!

your input on this will be very gratefull
thank you

this is the code for the page


HTML Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>footerart2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#chromemenu {
width : 100%; 
font-family : Arial; 
font-weight : normal; 
font-size : 70%; 
} 
#chromemenu:after {
content : "."; 
display : block; 
width : 100%; 
height : 0; 
clear : both; 
visibility : hidden; 
} 
#chromemenu ul {
border : 0 solid #bbb; 
width : 100%; 
background : url('images/chromebg9.gif') repeat-x center; 
margin : 0; 
text-align : center; 
padding-left : 0; 
padding-right : 0; 
padding-top : 2px; 
padding-bottom : 2px; 
} 
#chromemenu ul li {
display : inline; 
} 
#chromemenu ul li a {
color : #ffffff; 
padding : 1px; 
margin : 0; 
width : 16%; 
text-decoration : underline; 
border-right : 1px solid #dadada; 
} 
#chromemenu ul li a:hover {
background : url('images/chromebg10.gif') repeat-x center; 
}
</style>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (footerart2.png) -->
<table id="Table_10" width="100%" height="101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/footerart2_01.gif" width="4" height="26" alt=""/></td>
<td colspan="6" background="images/footerart2_01.gif" width="100%"></td>
<td><img src="images/spacer.gif" width="1" height="26" alt=""/></td>
</tr>
<tr>
<td colspan="5"><img src="images/footerart2_03.gif" width="401" height="14" alt=""/></td>
<td rowspan="3" background="images/footerart2_04.gif" width="100%"></td>
<td rowspan="3"><img src="images/footerart2_05X.gif" width="367" height="47" alt="Copyright © 2006 Intense Cosmetics Ltd"/></td>
<td><img src="images/spacer.gif" width="1" height="14" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="5"><img src="images/footerart2_06.gif" width="5" height="60" alt=""/></td>
<td><img src="images/footerart2_07.gif" width="278" height="15" alt=""/></td>
<td colspan="2"><img src="images/footerart2_08.gif" width="118" height="15" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="15" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');">
<img src="images/footerart2_09.gif" width="337" height="36" alt="Paypal, Secure Online Payments. Click for more info." border="0"/></a></td>
<td rowspan="4"><img src="images/footerart2_10x5.gif" width="59" height="45" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="18" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2" width="100%">
<div id="chromemenu">
<ul>
<li><a href="http://www.intense.uk.com/footer4.html">Home</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">About Us</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Privacy</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Terms</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Returns</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Site Map</a></li>
</ul>
</div>
</td>
<td><img src="images/spacer.gif" width="1" height="18" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="images/footerart2_12.gif" width="337" height="9" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="3" alt=""/></td>
</tr>
<tr>
<td colspan="2" background="images/footer3_09.gif" width="100%"><img border="0" src="images/footer3_09.gif" width="5" height="6"/></td>
<td><img src="images/spacer.gif" width="1" height="6" alt=""/></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="4" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="278" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="59" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="59" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="4" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="367" height="1" alt=""/></td>
<td/>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>