immagini non adiacenti in un <div>

[renzoz]

ciao, ho questo div:
div#menusotto{
margin:0px;
padding:0px;
position:absolute;
top:148px;
left:0;
width:100%;
height:25px;
background-image:url(imgs/bicolore.gif);
background-repeat:repeat-x;
text-align:left; }

sull'html l'ho messo cosi:

<div id="menusotto">
[img]imgs/angolo_inf_sx.gif[/img]
[img]imgs/M1.gif[/img]</td>
[img]imgs/M6.gif[/img]</td>
[img]imgs/M2.gif[/img]</td>
[img]imgs/M3.gif[/img]</td>
[img]imgs/M4.gif[/img]</td>
[img]imgs/M5.gif[/img]</td>
[img]imgs/angolo_inf_dx.gif[/img]
</div>

il problema è che tutte le immagini affiancate non sono appoggiate perfettamente l'una all'altra ma si sono creati degli spazi di circa 5 pixel in mezzo... come si può fare perchè siano tutte appoggiate senza buchi in mezzo?

[renzoz]

ehm.. avevo dimenticato di togliere i </td> dopo ogni immagine, in più ho aggiunto l'attributo align="left" su ogni img, adesso sono attaccate solo che dopo la seconda immagine mi va tutto a capo..