Problema menù inline a tendina e posizionamente DIV ... tutto in IE7!!

[Nix_Crowd]

Salve ragazzi, mi trovo a scrivere qui perchè non so più dove sbattere la testa!
1° Problema: Ho un menù a tendina create esclusivamente con i CSS, questo menù su FireFox, Opera, Safari e IE8 va che è una meraviglia. il problema sorge su (quel maledetto!!) IE 7. la tendina che si genera in stato di :hover, invece di apparire sotto i list item principali vi appare affianco nascondendo il "li" successivo.
Ecco il codice:

div#menu1 ul{padding-right: 4em;}
		
	div#menu1 ul li ul li{list-style-type:none;
				margin: 0;
				padding:0}

	div#menu1 li{display:inline;
			float:right;
			margin: 0;
			padding: 0.1em 0.1em 0.1em 0.1em;
			font-size:1em;
			font-family:Arial, Helvetica, sans-serif;}

		div#menu1 ul a:link {color:#FFFFFF;
					text-decoration:none;}

		div#menu1 ul a:visited{display: block;
						color: #FFFFFF;
						text-decoration: none;}

		div#menu1 ul a:hover{color:#FF0000}
		div#menu1 ul a:focus,
		div#menu1 ul a:active{background-color: #000000;
						color: #FF0000;
						text-decoration: none;}

			div#menu1 li ul{display: none;}

				div#menu1 li:hover ul{display: block;
								position: absolute;
								z-index:1;
								width:130px;
								padding: 0;
								margin: 0 0 0 -1px;
								background: #000000;
								font-size:1.2em;}

				div#menu1 li li {border-bottom:1px solid #696969;
							width: 130px;}

2° Problema: Sotto questo menù c'è un div contenitore(che funziona da menù, ma è comunque un contenitore):

div#content_menu{width:850px;
				height:188px;
				margin-top: 5em;
				margin-right: 3em;
				padding:0}

...con al suo interno 5 immagini:

div#content_menu img{float:left;}

... e al disotto di queste immagini c'è un altro div contenitore che a sua volta contiene 5 div che si dovrebbero andare a posizionare esattamente sotto le immagini:

div#content_menu0{float:left;}
		
		div#content_menu1{width:163px;
						height:70px;
						float:left;
						border-top: 1px solid #999999;
						border-bottom: 1px solid #999999;
						margin:4px 2px;
						padding:0 0 10px 0}
		div#content_menu2{width:163px;
						height:70px;
						float:left;
						border-top: 1px solid #999999;
						border-bottom: 1px solid #999999;
						margin:4px 2px 4px 5px;
						padding:0 0 10px 0}
		div#content_menu3{width:163px;
						height:70px;
						float:left;
						border-top: 1px solid #999999;
						border-bottom: 1px solid #999999;
						margin:4px 2px 4px 6px;
						padding:0 0 10px 0}
		div#content_menu4{width:163px;
						height:70px;
						float:left;
						border-top: 1px solid #999999;
						border-bottom: 1px solid #999999;
						margin:4px 2px 4px 5px;
						padding:0 0 10px 0}
		div#content_menu5{width:163px;
						height:70px;
						float:left;
						border-top: 1px solid #999999;
						border-bottom: 1px solid #999999;
						margin:4px 2px 4px 6px;
						padding:0 0 10px 0}

...questo avviene se visualizzo la pagina con tutti i browser tranne IE 7 e precedenti... come posso fare a farlo andare anche sugli altri?! ... mi è stato detto di usare degli hack, ma non avendolo mai fatto non so da dove partire!!

... c'è qualcuno che ha una mezza idea ?!?

Vi ringrazio anticipatamente ragazzi!!

[Nix_Crowd]

...non ci sono soluzioni ?! :|

[Nix_Crowd]

up!

[Mich_]

Sono problemi vecchi, afffrontati molte volte.

Anzitutto controlla quale DTD usi. Se puoi passa alla XHTML 1.0 Strict, che dovrebbe sistemare quasi tutto per IE6/7.
Se ancora hai problemi, utilizza i commenti condizionali (tra i "link utili" trovi riferimenti per capirne di piu`).

[Nix_Crowd]

Grazie mille per la risposta!!! ... Oramai non ci speravo più!!

Comunque ho capito come usare i commenti condizionali, ma avrei un paio di domande:
1. In molte guide si dice che il commento condizionale o viene usato direttamente nell'head dell'html:

style type="text/css">
h1 { color: #FF0000 }
</style>
<!--[if IE]>
  <style type="text/css">
  h1 { color: #0000FF }
  </style>
<![endif]-->

... oppure si può richiamare un file css alternativo per IE:

<link rel="stylesheet" href="tutti.css" type="text/css" />
<!--[if IE]>
  <link rel="stylesheet" href="iexplorer.css" type="text/css" />
<![endif]-->

... ora vorrei ben capire la seconda chance:
Se decido di caricare due CSS diversi, in quello per IE va specificato solo il codice per IE o tutto quello che metterei nel primo più le modifiche per IE?!? ... se è così, posso usare i commenti condizionali direttamente in un solo CSS ?!?

... grazie ancora in anticipo!!

EDIT:

P.S. Ho cambiato il DTD in Strict da Transitional ed il risultato è sempre lo stesso, i problemi son li stessi, sia per i menù a tendina sia per i posizionamenti dei div!! :°° (vorrei anche capire qual'è la differenza esatta tra DTD se possibile)

Resta da capire come usare bene i commenti condizionali...

[Mich_]

La logica dei commenti condizionali e`:
solo i brwoser IE leggono e interpretano cio` che e` scritto dentro il commento condizionale, gli altri browser lo vedono come puro commento.
Pertanto in ogni caso IE legge il CSS per tutti e poi (sottolineo che va inserito DOPO) legge quello per IE, che quindi e` sufficiente che contenga le "correzioni".
E questo vale per ambedue le sintassi.
Solo che la prima e` sbagliata per XHTML (pero` i brwoser di solito ignorano questo errore).

Nota che i commenti condizionali hanno sintassi HTML, non CSS, quindi vanno messi nel file HTML, mentre non e` possibile inserirli nel file CSS.
Per la sintassi CSS ci sono degli hack, che pero` in linea di massima non conviene usare (mio parere personale)

I manuali reference seri riportano le differenze di sintassi tra le varie DTD.
E nel sito HTML.it c'e` una guida specifica su XHTML, in cui sono evidenziate le differenze.

[Nix_Crowd]

Benissimo!! ... ho capito come sfruttare i commenti ... per quanto riguarda le DTD sto usando il sito del w3cSchool per capirle bene.

Ma ora ho altro enorme problema, non ho la minima idea di come scrivere una regola ad hoc per i menù a tendina (il codice funzionante su FF, GC, IE8 e Opera riportato nel primo post), cosa gli devo dire ad IE7 per farli apparire al di sotto e non affianco sulla stessa linea?!?

...e come faccio a farli funzionare anche sugli IE vecchi visto che :hover non lo supportano?!? (non vorrei usare JS)

P.S. ...scusami Mich_ se ti sto tartassando di domande

[Mich_]

Quale IE?
A me risulta che IE7 e IE8 supportino :hover in pieno. Invece IE6 e precedenti (nonche` tutte le versioni se usi una DTD transitional) supportano :hover solo sui link (tag <a>).

Comunque la maggior parte dei menu proposti in giro (alcuni citati tra i "link utili" - vedi ad esempio quelli di cssplay) sono compatibili anche con i vecchi IE.

[Nix_Crowd]

Non intendevo dire che IE7 non lo supporta lo stato di :hover, intendevo dire che lo interpreta male, almeno il mio codice :|
Proverò intanto con un altro codice, ma mi sapresti dire se ci sono errori in questo ?! :

div#menu1 ul{padding-right: 4em;}
		
	div#menu1 ul li ul li{list-style-type:none;
				margin: 0;
				padding:0}

	div#menu1 li{display:inline;
			float:right;
			margin: 0;
			padding: 0.1em 0.1em 0.1em 0.1em;
			font-size:1em;
			font-family:Arial, Helvetica, sans-serif;}

		div#menu1 ul a:link {color:#FFFFFF;
					text-decoration:none;}

		div#menu1 ul a:visited{display: block;
						color: #FFFFFF;
						text-decoration: none;}

		div#menu1 ul a:hover{color:#FF0000}
		div#menu1 ul a:focus,
		div#menu1 ul a:active{background-color: #000000;
						color: #FF0000;
						text-decoration: none;}

			div#menu1 li ul{display: none;}

				div#menu1 li:hover ul{display: block;
								position: absolute;
								z-index:1;
								width:130px;
								padding: 0;
								margin: 0 0 0 -1px;
								background: #000000;
								font-size:1.2em;}

				div#menu1 li li {border-bottom:1px solid #696969;
							width: 130px;}

... cioè non capisco perchè in IE7 genera il menù lateralmente al link e non al di sotto!! :|

[Nix_Crowd]

EDIT: E' venuto fuori un doppio post, perdonatemi.