Ciao a tutti

Devo realizzare un menu e lo faccio come al solito specificando delle regole per i tag ul. il codi che ho prodotto è il seguente

html
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" type="text/css" href="css/stileMenu.css"/>
<html>
<head>
	<title>Prove Menu</title>
</head>

<body>
<div id="colonna">
	 <ul id="menu">
	 	[*]
				  	   <div class="Quadratino">
				  	   c
					   </div>
					   <div class="Testo">
					   		Primo
					   </div>
		 
		[*]
				  	   <div class="Quadratino">
				  	   c
					   </div>
					   <div class="Testo">
					   		Primo
					   </div>
		 
		[*]
				  	   <div class="Quadratino">
				  	   c
					   </div>
					   <div class="Testo">
					   		-ciao
					   </div>
		 
		 
	[/list]
</div>

</body>
</html>
CSS
codice:
/* CSS Document */
body
{
	background-color:#000000;
	margin:0px;
	padding:0px;
}
#colonna
{

 		width:150px;
		background-color:transparent;		
}
ul#menu
{
 	   margin:0px;
	   padding:0px;
	   list-style:none;
	   border-width:0px;
}


ul#menu li
{
	width:150px;
	height:20px;
}
ul#menu li a
{
		display:block;
		text-decoration:none;
}
ul#menu li a:hover
{
	background-color:green;
}
.Quadratino
{
 	float:left;
	width:20px;
	height:20px;
	background-color:#f498cb;
}
.Testo
{	

 	float:left;
	width:130px;
	height:20px;
	background-color:#ff2311;
}
Il layaut che desidero è quello che restituisce FireFox Mentre Explorer mi lascia tra i vari[*] una specie di margine che non riesco a eliminare.In questo momento non posso mettere delle immagini esplicati quindi se qualcuno mi vuole aiutare dovrà provare il codice per capire meglio il mio problema