Problema con Menu Accordion e IE

[Puzzola]

Sto scrivendo un browser game e relativa interfaccia.
Ovviamente è mio desiderio scrivere le pagine seguendo gli standard W3C.
Il che sarebbe già una novità a giudicare da come sono scritte le interfacce di tutti i browser game in giro.

Prima precisazione: le pagine girano perfettamente su FF e Safari e sono W3C validated.

I problemi nascono con IE7.

Nella parte sinistra uso un menu dinamico accordion (jquery).

Il codice html+css è questo:

<div id="menu">

<ul class="ui-accordion" id="navigation">

<li class="menuheader">
     Menu Generale


<li class="menu_separator">[img]/images/blank.png[/img]

<li class="rootmenu">
<?php echo $this->translate('Home'); ?>

            
<li class="menu_separator">[img]/images/blank.png[/img]

<li class="rootmenu">
<?php echo $this->translate('Buildings'); ?> …
	<ul class="submenu">
        
        <li class="submenu">
         · <?php echo $this->translate('Centro Infrastrutture'); ?>
        [/list]


<li class="menu_separator">[img]/images/blank.png[/img]
            
<li class="menubottom">[img]/images/blank.png[/img]
[/list]
	
</div>	

CSS

#menu
{
    overflow:hidden;
    width:190px;
	float: left;
	border: none;
    font-size:11px;
}

#menu li
{
	padding:0px;
	text-indent:25px;
	font-weight:700;
	line-height:20px;
    background-image: url(/images/menuback1.png);
	background-repeat:repeat;
    overflow:hidden;
}

#menu li.submenu
{
	text-indent: 30px;
	background: transparent none;
}


#menu li.menuheader
{
	line-height:20px;
	text-align:center;
	padding-top:25px;
	text-indent:0px;
	background-image: url(/images/menuheader.png);
}

#menu li.menu_separator
{
	line-height:1px;
	background-image: url(/images/menuseparator.png);
	background-repeat:no-repeat;
	height:1px;
}

#menu li.menubottom
{
	line-height:30px;
	padding:0px;
	text-indent:0px;
	background-image: url(/images/menubottom.png);
}	


#menu li.menufooter
{
	text-align:center;
	font-weight:300;
	font-size:9px;
	text-indent:0px;
	line-height:15px;
}
	
#menu a
{
	text-decoration: none;
	display:block;
	width:100%;
}

#menu a.menuactive:hover
{
   	background-image: url(/images/menuback2.png);
	background-repeat: repeat;
	color: black;
}

Cliccando su un a.head viene visualizzato il submenu seguente...


Ecco come appare in FF3 e IE7 :








Ultime precisazioni:
1) anche disabilitando il menu accordion i problemi di visualizzazione rimangono
2) il css non è stato ancora ottimizzato...ma cmq è pure lui W3C validated
3) sto cercando di evitare di usare hack anche in previsione di permettere agli utenti di creare skin al gioco (sovrascrivendo quindi i css...)
4) odio IE e fosse per me farei solo siti W3C validated senza badare alla visualizzazione con IE...ma essendo il browser più diffuso non posso escluderlo...


Mi pare che i problemi siano:
1) sposta a destra e taglia lo sfondo dei li...(non dipende da altri div a destra perchè li ho levati e lo fa lo stesso...)
2) fa casino con gli spaziatori (non mi prende altezza 1px...)
3) aggiunge uno spazio di 1 pixel fra distanziatore e li successivo
4) fa casino con text indent (nei submenu) spostando il testo e pure lo sfondo a:hover

Chiedo aiuto...

Se serve posso postare pure i computed style di ogni elemento che mi da la debugbar di IE.

Grazie,
Andrea aka Puzzola

P.s.: piccola nota polemica...cosa aspettarsi da una azienda la cui homepage se passata al vaglio del validator da: Errors found while checking this document as XHTML 1.0 Transitional!
Result: 164 Errors, 27 warning(s)

[Puzzola]

Ok...chi fa da se fa per tre...ho risolto...
In pratica ho dovuto dare le "misure" di ogni singolo elemento perchè IE non riesce/vuole dedurle dall'elemento contenitore.
Quello che con FF o Safari si può sottointendere va specificato a IE...il cugino scemo...
Dopo varie prove son riuscito a contenere l'aumento di istruzioni nel css...
Certo che se non ci fosse IE sarebbe meglio...