Problème alignement image réactive (rollover) sans javascript

bonjour,
merci à tous pour vos tuts vraiment utiles et bien faits.
j'ai un petit problème avec ce tut: Une image réactive sans javascript
en effet, je n'ai aucun problème pour le réaliser, il marche très bien, mais je souhaite l'utiliser pour faire un menu horizontal dans le header de mon site.
Le problème est que je n'arrive pas à les aligner horizontalement.
je vous transmet mon code afin de mieux comprendre.

CSS:
a.nav1 { /* définition de la classe "image" de la balise <a> */
     display: block;
     width: 143px; /* largeur de l'image réactive */
     height: 48px; /* hauteur de l'image réactive */
     background-image: url(images/nav01.jpg); /* source de l'image de départ */
     }
	 
a.nav1:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/nav01b.jpg); /* source de l'image d'arrivée */
     } 
	 
a.nav2 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 143px; /* largeur de l'image réactive */
     height: 48px; /* hauteur de l'image réactive */
     background-image: url(images/nav02.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
a.nav2:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/nav02b.jpg); /* source de l'image d'arrivée */
     } 	 

a.nav3 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 143px; /* largeur de l'image réactive */
     height: 48px; /* hauteur de l'image réactive */
     background-image: url(images/nav03.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
a.nav3:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/nav03b.jpg); /* source de l'image d'arrivée */
     }	 
	 
a.nav4 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 143px; /* largeur de l'image réactive */
     height: 48px; /* hauteur de l'image réactive */
     background-image: url(images/nav04.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
a.nav4:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/nav04b.jpg); /* source de l'image d'arrivée */
     }
	 
a.nav5 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 93px; /* largeur de l'image réactive */
     height: 48px; /* hauteur de l'image réactive */
     background-image: url(images/nav05.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
a.nav5:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/nav05b.jpg); /* source de l'image d'arrivée */
     }	 	 


HTML:
</td></tr>
          </table>
          <table cellspacing=0 cellpadding=0>
          <tr><td><a><img src=images/nav00.jpg width=143 height=48 border=0></a><a class="nav1" href=<?=tep_href_link('index.php')?>></a><?php
$cPath_nouveau = tep_get_path(1);
echo '<a  class="nav2" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=1') . '"></a>';
?>
<?php
$cPath_nouveau = tep_get_path(2);
echo '<a  class="nav3" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=2') . '"></a>';
?>
<?php
$cPath_nouveau = tep_get_path(3);
echo '<a class="nav4" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=3') . '"></a>';
?>
<?php
$cPath_nouveau = tep_get_path(21);
echo '<a class="nav5" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=21') . '"></a>';
?>
<a><img src=images/nav06.jpg width=197 height=48 border=0></a>';
?></td></tr>
           <tr><td height=16></td></tr>

Merci.

je sais que mon problème vient du fait que mon display est block, mais je ne peux faire autrement pour que l'image souhaitée apparaisse.
si quelqu'un avait une solution, je suis preneur.
Je me doute que le problème ne doit pas être très sorcier mais là, je sèche.

Merci

j'ai trouvé une solution à mon problème.
je ne sais pas si elle est bonne mais je n'ai trouvé que celle-la.
afin de mettre chaque élément aligné les uns aux autres j'ai encadré chaque élément par une balise: <td></td>.
dites moi si je suis dans l'erreur.
voila mon code HTML:

<tr><td><a><img src=images/nav00.jpg width=143 height=48 border=0></a></td><td><a class="nav1" href=<?=tep_href_link('index.php')?>></a></td><td><?php
$cPath_nouveau = tep_get_path(1);
echo '<a  class="nav2" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=1') . '"></a>';
?></td>
<td><?php
$cPath_nouveau = tep_get_path(2);
echo '<a  class="nav3" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=2') . '"></a>';
?></td>
<td><?php
$cPath_nouveau = tep_get_path(3);
echo '<a class="nav4" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=3') . '"></a>';
?></td>
<td><?php
$cPath_nouveau = tep_get_path(21);
echo '<a class="nav5" href="' . tep_href_link(FILENAME_DEFAULT, $cPath_nouveau . '&header_categorie=21') . '"></a>';
?></td><td><a><img src=images/nav06.jpg width=197 height=48 border=0></a></td></tr>