Salve a tutti,
mi sono appena registrato al forum perchè recentemente sto avendo problemi con un layout in css (è proprio un layout che ho preso qui da un articolo e modificato in base alle mie esigenze).
Quindi il layout che ho scaricato e modificato è formato adesso da:

- Container _container_:
1) Header _header_ (diviso in due parti: sinistra _header_left_ per il logo e destra _header_right_ per mettere una img all'estrema destra)
2) Una parte sotto l'header _navigation_ (una specie di secondo header poco più sottile per la visualizzazione di alcune informazioni)
3) Content _content_ (contenuto del sito diviso in due parti: sinistra _left_ per il calendario e il menu disposti in cascata e destra _right_ per il contenuto principale)
4) Footer _footer_

Andiamo adesso al primo problema che si presenta solamente su IExplorer: la parte sinistra del content (calendario e menu) non me lo allinea al bordo sinistro, ma si mette sopra la parte destra del content, creando quindi una confusione totale. Per chiarire le idee vi allego qui due screenshots per farvi capire le differenze sostanziali tra i due browser (IExplorer e Firefox).



codice:
<center>
<div id="container">
	<div id="header">
		<div id="header_left">
			<h1>Musiculture</h1>
			<h2>Amministrazione - Pannello di Controllo</h2>
		</div>
		<div id="header_right">
			[img]password.png[/img]
		</div>
	</div>
	<div id="navigation">
		<table border="0" width="100%">
		<tr>
			<td style="text-align: left;">
				[img]kgpg.png[/img]Andrea Cavallaro
				[img]clock.png[/img]<span id="theTime" style="position:absolute; left:10; top:10; font-family: arial; font-size: 9pt"></span>
				
			</td>
		</tr>
		</table>
	</div>
	<div id="content">
		<div id="left">
			<script type="text/javascript" src="calendar.js">
			<div id="menu5">
				<ul>
					[*]Home & News
					[*]About Us
					[*]Artists
					[*]Events
					[*]Charts
					[*]Audio
					[*]Shop
					[*]Friends
					[*]Contact Us
					[*]Newsletter
				[/list]
			</div>
		</div>
		<div id="right">

		</div>
	</div>
	<div id="footer">
			
		

		<h3>DUX Control Center &copy; 2008 &bull; Coding by Francesco Pasqua &bull; francesco.pasqua-1987@poste.it</h3>
	</div>
</div>
</center>
Ecco la visualizzazione corretta di Firefox:


Ed ecco la visualizzazione errata di Internet Explorer:


Qui incollo il file .css:
codice:
html,body{

	font-size: 100%;
	width: 100%; 
	margin: 0 auto;
}
body{
	background: #c0c0c0 url(body-bg.gif) 0 0 repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #555555;
	font-size: 11px;
	overflow: Hidden;
}
div#container{
	position:relative; 
	width: 65%; 
	height: 100%;
	margin-top: 20px;
	border-left: 1px solid #898989;
	border-right: 1px solid #898989;
	border-top: 1px solid #898989;
	border-bottom: 1px solid #898989;
	background: #FFFFFF
}
body>div#container{
	height:auto;
	min-height:100%
}
div#footer{
	position: static;
	bottom:0; 
	width: 100%; 
	padding-top: 1em;
	background-color: #69c; 
	color: #555555;
	text-align:center;
	background: #FFF url(foot.gif) repeat;
	border-top: 1px solid #D0D0D0;
}
div#footer a:link {
	color: #346198;
	font-weight: bold;
	text-decoration: none;
}
div#footer a:visited {
	color: #346198;
	text-decoration: none;
}
div#footer a:hover {
	color: #dc4a00;
	text-decoration: none;
}
div#footer a:active {
	color: #346198;
	text-decoration: none;
}
div#footer a {
	font-size: 11px;
	font-weight: bold;
}
/*stili generici, su header e footer*/
div#header{
	position: relative;
	background: #FFF url(top.gif) repeat;
	color: #555555;
	text-align: left;
	padding-top: 1em;
	padding-left: 1em;
	padding-right: 1em;
	
}
div#header_left{
position: absolute;
width: 50%;
overflow: auto;
}
div#header_right {
	width: 50%;
	padding-left: 50%;
	text-align: right;
	padding-bottom: 1em;
}
h1,h2, h3{
	margin: 0;
	padding:0;
}
h1{
	font: bold 2.2em Verdana, Arial, Helvetica, sans-serif;
}
h2{
	font: bold 1.0em/40px Verdana, Arial, Helvetica, sans-serif;
}
h3{
	font: normal 1.0em/35px Verdana, Arial, Helvetica, sans-serif;
}
div#footer a{
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}

div#navigation{
	background: #FFF url(tr_bck.gif) repeat;
	text-align: left;
	padding: 0.5em 0.5em 0.5em 0.5em;
}
div#content{
	position: relative;
	min-height: 501px;

}
div#right{
margin-left: 30%;
padding: 1em 1em 1em 1em;
}
div#left{
position: absolute;
padding: 0 0 0 0;
width: 30%;
text-align:left;
overflow: auto;
}
Penso ci sia tutto.

Il secondo problema invece è che se non metto nessun contenuto nella parte destra del content il menu trapassa il footer (solo su IExplorer, come se non accetta il parametro mi-height del css) come in questa immagine:



Mentre su Firefox non fa nessun tipo di difetto perchè si regola in base al min-height che c'è sul css:
codice:
body>div#container{
	height:auto;
	min-height:100%
}

...

div#content{
	position: relative;
	min-height: 501px;
}
Infatti guardate la visualizzazione di Firefox: