Alignement vertical des puces dans une liste sous IE

Bonjour à tous, j'ai un petit problème avec mes listes à puces sous IE ... En effet, si un élément de liste "prend plusieurs ligne" ma puce sous IE va se situer "en bas" de toutes les lignes et non se positionner juste à gauche de la première ligne ...

Cela n'est pas le cas sous firefox et je n'ai pas testé sur d'autres navigateurs ...

Voici la page en question
!! login et pass = refractory !!

Voici mon code css :

#menu {
	left: 15px;
	top: 130px;
	width: 160px;
	height: 455px;
	position: absolute;
	background-color: #DAF1E7;
}
#menu ul {
	margin: 0;
	padding: 2em 0.2em 2em 0.5em;
	margin-left: 2.5em;
}
#menu ul ul {
	margin: 0;
	padding: 0.5em 0.2em 1em 0em;
	margin-left: 1em;
	list-style-type: square; 
}
#menu li {
	margin: 0px; 
	padding: 0px;
	list-style-type: square;
	list-style-image: none;
	list-style-position: outside;
	padding-left: 0px;
	font-size: 1.0em;
	font-weight: normal;
}
#menu .menu_general {
	list-style-image: url(../template/separate.gif);
	font-size: 1.1em;
	font-weight: bold;
}
#menu a:link, #menu a:visited {
	display: block;
	width: 100%;
	color: #000000;
	text-decoration: none;
}
#menu a:hover {
	display: block;
	width: 100%;
	color: #000000;
	text-decoration: none;
	background-color: #ABE1CA;
}

Voici mon code html :

<div id="menu">
		<ul>
			<li class="menu_general"><a href="index.php?menu=0">Accueil</a></li>
			<li class="menu_general"><a href="index.php?menu=1">Nos produits</a>
			<?php if ($_GET['menu'] == '1') {?>
			<ul>
				<li><a href="#">Briques isolantes</a></li>
				<li><a href="#">Briques denses</a></li>
				<li><a href="#">Bétons réfractaires et isolants</a></li>
				<li><a href="#">Fibres céramiques et solubles</a></li>
				<li><a href="#">Panneaux isolants</a></li>
				<li><a href="#">Panneaux denses</a></li>
				<li><a href="#">Cordes et tresses céramiques et solubles</a></li>
				<li><a href="#">Microporeux</a></li>
				<li><a href="#">Laines de roche industrielles</a></li>
				<li><a href="#">Moulés sous vide</a></li>
			</ul>
			<?php }?>
			</li>			
			<li class="menu_general"><a href="index.php?menu=2">Nos services</a>
			<?php if ($_GET['menu'] == '2') {?>
			<ul>
				<li><a href="#">Usinage et découpes de nos produits</a></li>
				<li><a href="#">Stock important et livraisons rapides</a></li>
				<li><a href="#">Préfabrication de pièces en béton, en briques réfractaires</a></li>
			</ul>
			<?php }?>
			</li>
			<li class="menu_general"><a href="index.php?menu=3">Nos références</a>
			<?php if ($_GET['menu'] == '3') {?>
			<ul>
				<li><a href="#">Sidérurgie</a></li>
				<li><a href="#">Verrerie</a></li>
				<li><a href="#">Cimenterie</a></li>
				<li><a href="#">Fonderie</a></li>
				<li><a href="#">Chaudières</a></li>
				<li><a href="#">Céramiques</a></li>
				<li><a href="#">Engineering</a></li>	
			</ul>
			<?php }?>
			</li>
			<li class="menu_general"><a href="index.php?menu=0">Nous contactez</a></li>
			<li class="menu_general"><a href="index.php?menu=0">Nous rejoindre</a></li>
		</ul>
		<img src="template/bas_menu.jpg" width="160" height="90" alt="Présentatiosn des produits en images dans le menu" />
	</div>

Voilà je pense que le code n'est peut-être pas le mieux, mais je suis assez débutant ...

J'ai essayer de mettre un vertical-align:top à l'élément <li> du #menu mais alors ça palace toute mais puce trop haute par rapport à ma première ligne de texte ...

Si quelqu'un peu m'aider ça serait vraiment sympas

Biloduo

tu epux essayer d'utiliser des puces graphiques placées en background de l'element li, comme cela tu les place ou tu veux.

et comment fais-t-on ???

list-style-image: url(...);