Salve Amici,

Sto Costruendo un Layout liquido a 2 colonne con i CSS.

Con Firefox tutto e OK, Ma con Internet Explorer Iniziano i Dolori, per i seguenti motivi:

  • Non Riesco a dare una larghezza minima al contenitore, ho provato ed inserire questo hack per IE sotto la riga di inclusione del css:

    codice:
    <!--[if lte IE 6]>
<style type="text/css">
div#contenitore{ width: expression(document.body.clientWidth<=500 ? "500px" : "auto")}
</style>
<![endif]-->
    Ma niente da Fare.
  • Non Riesco a centrare il testo del div contenuti.


Come posso risolvere questi problemi di compatibilità ?

Grazie di Cuore !

File: prova.htm
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Beta 0.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">@import "css/stile.css";</style>
<!--[if lte IE 6]>
<style type="text/css">
div#contenitore{ width: expression(document.body.clientWidth<=500 ? "500px" : "auto")}
</style>
<![endif]--> 
</head>

<body>
	<div id="contenitore">
		<div id="testata"></div>
		<div id="menu">Menu</div>
		<div id="contenuti">

Qui tutti i Contenuti del Sito</p></div>
		<div id="navigazione"></div>
	</div>
</body>
</html>

File: stile.css
codice:
html, body {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image: url(../images/bg.gif);
	text-align: center;
}

#contenitore {
	background-color: #FFFFFF;
	text-align: left;
	margin: 0 auto;
	width: 85%;
	min-width: 760px;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
#testata {
	height: 100px;
	background-color: #FFCC99;
}
#menu {
	background-color: #FFFFCC;
	width: 200px;
	height: 400px;
	float: left;
}
#contenuti {
	background-color: #CCCCCC;
	display: inline;
	text-align: center;
	width: auto;
}
#navigazione {
	background-color: #CC6600;
	clear: left;
	height: 20px;
}
p {
	margin: 0px;
	padding: 0px;
}