[>IE6] Bug su lista floattata

[pictor]

Ho un problema su IE6 e inferiori...

Ho un menu fatto con una lista di[*] floattanti a sinistra.
Su Firefox, IE7, Safari e Chrome funziona.

Su IE6, IE5.5 etc invece i[*] sono tutti uno sottostante all'altro.
Nonostante il

float: left;

Come si corregge questo bug?

[fcaldera]

dentro gli[*] che elementi ci sono e che stile hanno?

Se ci sono dei link dai float anche a quelli.
Altrimenti se hai solo testo, definisci una larghezza agli[*]

[lila89]

IE6 pultroppo ha molti bug... per risolverli devi 1) impostare tutti imargini, 2) usare la dicituara display:inline;

[pictor]

Qua sotto ecco il codice:

HTML

<div id="menu">
	<ul>
		[*]
			Home
		
		[*]
			Organigramma
		
		[*]
			Progetti
			<ul>
				[*]
					Monitoraggio radioattività
				
				[*]
					Flussimetri
				
			[/list]
		
		[*]
			Aree di business
			<ul>
				[*]
					Radioattività
				
				[*]
					Geochimica
				
				[*]
					Automotive
				
				[*]
					Ricerca
				
				[*]
					Fotovoltaico
				
				[*]
					Test Benchs
				
			[/list]
		
		[*]
			Clienti
		
		[*]
			Partner
		
		[*]
			Contatti
		
	[/list]
</div>

CSS (dei menu)

#menu {
	width: 100%;
	background-color: #2F495D;
	
}

/* Menu principale */

#menu ul {
	position: relative;
	
	list-style: none;
	margin: 0;
	padding: 0;
	
}

#menu ul li, #menu ul li a {
	/* Posizione */
	float: left;
	/*
	height: 20px;
	*/
	
	/* Stile */
	padding: 0;
	background-color: #2f495d;
	color: #fff;
	
	font-weight: bold;
	font-size: 90%;
	
}

#menu ul li a {
	/* Stile */
	text-decoration: none;
	padding: 3px 5px;
	margin: 1px;
}

#menu ul li:hover a {
	text-decoration: underline;
}

#menu ul li:hover, #menu ul li:hover a {
	background-color: #B53B48;
	color: #fff;
}

#menu ul li:hover ul, #menu ul li:hover ul li, #menu ul li:hover ul li a {
	background-color: #d7848c;
	color: #fff;
}


/* Sottomenu */

#menu ul ul {
	/* Posizionamento 
	position: absolute;
	right: 10%;
	
	display: none;
	width: 300px;
	*/
	/* Stile */
	
}

#menu ul li:hover ul{
	/* Posizionamento */
	display: block;	/* NB: Fa apparire i sottoelementi */
	
}


div#menu ul li ul li:hover {
	background-color: #d7848c;
	font-size: 110%;
}

/* Menu e sottomenu dinamici */

#menu {
	/*
	width: 100%;
	*/
	background: #eee;
	float: left;
	
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* width: 12em; */
	float: left;
	
}

#menu a, #menu h2 {
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	/*
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	*/
	margin: 0;
	padding: 2px 3px;
	
}

#menu h2 {
	/*
	color: #fff;
	background: #000;
	text-transform: uppercase;
	*/
	
}

#menu a {
	
	/*color: #000;
	background: #efefef;
	text-decoration: none;
	*/
	
}

#menu a:hover {
	color: #a00;
	background: #fff;
	
}

#menu li {position: relative;}

#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
	
	z-index: 100;
	
}

#menu ul ul {
	position: absolute;
	z-index: 500;
	top: 100%;
	
}

div#menu ul ul {
	display: none;

}

div#menu ul li:hover ul
{display: block;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

body {
	behavior: url(csshover2.htc);
}

Alla lista aggiungo i CSS di Tanfa.co.uk per trasformarla in menu a tendina.

Funziona bene su tutti i browser tranne che per IE dalla versione 6 in giù.

Ho provato ad aggiungere con i commenti condizionali il seguente CSS. Ma non risolve niente...

/* CSS per IE */
	
	/* Menu orizzontale */
	#menu a, #menu li{
		display: inline;
		float: left;
		margin: 1px;
		width: 100px;
		
	}

Nè i margini, nè il float, nè il width mi risolvono il problema....