Altezza DIV 100% e Crossbrowser

**Kiusugi** · 17-10-2005, 17:31

Ragazzi non so più dove sbattere la testa.

Sto convertendo un sito da Table-Oriented a Tableless grazie ai CSS. Sono un pò digiuno ma ho letto praticamente tutte le guide di HTML.IT ma sto riscontrando un grandissimo problema.

In Internet Explorer funziona tutto correttamente. Il sito formato da Header, Footer e 3 colonne(2 sono menù) si vede perfettamente. I due menù laterali che presentano un immagine di sfondo si adattano alla pagina.

Il problema nasce con Firefox. I due menù lateriali non si adattano al contenuto e si allungano in modo del tutto anomalo lasciando un orrido spazio nerro sotto il DIV centrale.

Vi allego l'immagine che è sicuramente più esplicativa.

il sito ha questa struttura:

codice:

<div id="container">
	<div id="header">PHP HEADER</div>
	<div id="container2">
		<div id="navigation">PHP Menù SX</div>
		<div id="extra">PHP Menù DX</div>
		<div id="content">PHP News</div>
	</div>
	<div id="footer">PHP FOOTER</div>
</div>

Per i CSS ho impostato tutto ciò che serve ma non capisco dove è l'errore:

codice:

html, body {
	height: 100%;
	...
}

div#container{
	width:750px;
	min-height:480px;
	height:100%;
}

div#container2{
	padding-top:0px;
	min-height:480px;
	height:100%;
	...
}

div#header{
	width:750px;
	height:105px;
	margin:5px auto;
}

div#footer{
	width:750px;
	clear:both;
	text-align:center;
	padding: 5px 0;
}

div#navigation{
	float: left;
	width: 120px;
	\width:130px;
	w\idth:120px;
	border-width: 1px;
	border-style:solid;
	border-color: #666;
	min-height:480px;
	height:100%;
	background-image:url("images/ks/menu.jpg");
	background-repeat: repeat-y;
	background-position: top left;
}

div#extra{
	float: right;
	width: 120px;
	\width:130px;
	w\idth:120px;
	border-width: 1px;
	border-style:solid;
	border-color: #666;
	min-height:480px;
	height:100%;
	padding-right:1px;
	background-image:url("images/ks/menu.jpg");
	background-repeat: repeat-y;
	background-position: top left;
}

div#content{
	margin: 1px 125px auto 125px;
	min-height:480px;
	height:100%;
}

Penso di aver messo tutto il necessario eliminando il superfluo.

Potete aiutarmi pls???

Grazie a tutti in anticipo anche solo per la pazienza.

**Kiusugi** · 18-10-2005, 15:46

Sto leggendo a destra e a manca su tutto Pro.html.it ogni possibile documento e sono arrivato a scoprire questo, il !DOCTYPE che mi permette il funzionamento corretto dell'height:100% sotto IE è questo:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Ma purtroppo in Firefox non funziona, le colonne del menù non si allungano per tutta la pagina.

Avete qualche dritta da darmi???

Discussione: Altezza DIV 100% e Crossbrowser

Strumenti discussione

Ricerca discussione

Visualizza

Altezza DIV 100% e Crossbrowser

Permessi di invio