Problème fonctionnalité menu deroulant hor. sous IE 7

Bonjour, j'ai réussi à intégrer dans ma page le menu, sous firefox aucun probleme

Mais, malgré que le menu a été testé sous IE, sous IE 7 il y a des decalages entre les images des sous-menus:
Voir ici:
[URL=http://img151.imageshack.us/my.php?image=mozillaie7cr6.jpg][IMG]http://img151.imageshack.us/img151/7834/mozillaie7cr6.th.jpg[/IMG][/URL]

Que faut-il faire pour que IE prenne en compte convenablement ma mise en page svp ?

Ma CSS(modifié de façon à mettre mes images etc...)

<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 50%;
z-index:100;
width: 100%;
margin-left: -375px; /* moitié de la largeur */


}
#menu dl {
float: left;


margin: N 1px;
}

#menu dl1 {
float: left;
width: 563px;
height: 63px;
margin: N 1px;
}

/* Onglets position normale  */
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;

background: #fff000;
border: 0px solid gray;
}
/* Bord sous-menus */
#menu dd {
border: 0px solid gray;
}

/* Fond sous-menus */
#menu li {
text-align: center;
background: #fff;
height: 62px;
}
/* Propriétés liens sous-menus */
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
/* Fond sous-menus survolés */
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
top: 300px;
left: 50%;
z-index:1;
width: 100%;
margin-left: -375px; /* moitié de la largeur */

padding: 5px;

}

a {text-decoration: none;
color: black;
color: #222;
}

a img {border: none;}
-->

Mon code HTML:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="750" HEIGHT="100" ALIGN="CENTER">

<TR>
<TD ROWSPAN="1" COLSPAN="3" WIDTH="563" HEIGHT="38">
	<IMG NAME="menuhautmedit0" SRC="menuhautm(edit)_1x1.jpg" WIDTH="563" HEIGHT="38" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="187" HEIGHT="38">
	<A HREF="http://www.Miseenscenedeco.com/coachingdeco.htm"><IMG NAME="menuhautmedit1" SRC="menuhautm(edit)_1x2.jpg" WIDTH="187" HEIGHT="38" BORDER="0"></A></TD>
</TR>

<div id="menu">
	<IMG NAME="fondsite123" SRC="fond site123.jpg" WIDTH="750" HEIGHT="200" BORDER="0">
	
	<BR>
	<dl width="563">
		<dt onmouseover="javascript:montre('smenu0');"><a href="#"><IMG NAME="menuhautmedit0" SRC="menuhautm(edit)_1x1.jpg" WIDTH="563" HEIGHT="38" BORDER="0"></a></dt>
	</dl>

	<dl>
		<dt onmouseover="javascript:montre('smenu01');"><a href="#"><IMG NAME="menuhautmedit1" SRC="menuhautm(edit)_1x2.jpg" WIDTH="187" HEIGHT="38" BORDER="0"></a></dt>
	</dl>
	
	<br clear="all">
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><a href="#"><img src="menuhautm(edit)_2x1.jpg" width="189" height="62"></a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Mariage du Cœur</a></li>

					<li><a href="#">Mariage Afrique</a></li>
					<li><a href="#">Mariage Pique-nique</a></li>
					<li><a href="#">Mariage de l'Eau</a></li>
					<li><a href="#">Mariage</a></li>
					<li><a href="#">Mariage</a></li>
					<li><a href="#"><img src="menuhautm(edit)_2x1.jpg"></a></li>
					<li><a href="#"><img src="menuhautm(edit)_2x1.jpg"></a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><a href="#"><img src="menuhautm(edit)_2x2.jpg" width="187" height="62"></a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><a href="#"><img src="menuhautm(edit)_2x3.jpg" width="187" height="62"></a></dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">

				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');"><a href="#"><img src="menuhautm(edit)_2x4.jpg" width="187" height="62"></a></dt>
			<dd class="ddcoaching" id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			
				<ul>
					<li><a href="#">Conseils Couleurs <br>& <br> décoration d'intérieur</a></li>
				</ul>
			</dd>
	</dl>
	
</div>

</TABLE>

J'espère que quelqu'un connait la solution,

Merci par avance