Problema con la lunghezza dei DIV

[Nebula88]

Ciao a Tutti

Scusate ma ho un problema, anzi due!

In pratica, nonostante abbia messo come parametro HEIGHT=100% nel CSS, i due DIV(sinistro e centrale) si adattano al contenuto e non arrivano a fondo della pagina ammenochè non lo faccia anche il contenuto..perciò spesso lo sfondo si ferma a metà!

ecco il link.

Come se non bastasse ho dei problemi di visualizzazione con FireFox..
infatti il testo dei pulsanti è più basso rispetto allo sfondo,

potreste aiutarmi?!

Ecco il codice CSS dei 2 DIV di cui vi parlo(navigation e content) e del Container:

html,body{
margin:0;
padding:0;
text-align:center;
}
body{font-family:arial,sans-serif;
font-size: 76%
}
div#container{
width:760px;
height:100%;
margin: 0 auto;
min-height:inherit;
text-align:center;
padding:0;
}

div#navigation{
background: url(images/sfondo.gif);
float: left;
width: 160px;
height:100%;
padding-top: 200px;
padding-left:0px;
min-height:100%;
text-align:center;
min-height:inherit;
position:relative;
margin:0;
}
div#content{
width:auto;
height:100%;
padding-top: 15px;
background-image:url(images/logo-square.jpg);
text-align:center;
vertical-align:middle;
position:relative;
margin-left:160px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
min-height:inherit;
border-color:#FF1FFF;
border-width:medium;
}

Vi Ringrazio In Anticipo.

[Mich_]

100% di che?
Non ha senso dare un valore percentuale rispetto ad un oggetto la cui altezza non e` definita.

Perche` abbia senso la tua
height: 100%;
nel #container, e` necessario che ci sia
height: 100%;
anche nel html e nel body.

[Nebula88]

Ok ho messo il 100% nel body ma perchè uno è più lungo dell'altro??
ecco il link

ed ecco il codice:

html,body{
margin:0;
padding:0;
height:100%;
text-align:center;
}
body{font-family:arial,sans-serif;
font-size: 76%
}
div#container{
width:760px;
height:100%;
margin: 0 auto;
min-height:inherit;
text-align:center;
padding:0;
}

div#navigation{
background: url(images/sfondo.gif);
float: left;
width: 160px;
height:100%;
padding-top: 200px;
padding-left:0px;
min-height:100%;
text-align:center;
min-height:100%;
position:relative;
margin:0;
}
div#content{
width:auto;
height:100%;
padding-top: 15px;
background-image:url(images/logo-square.jpg);
text-align:center;
vertical-align:middle;
position:relative;
margin-left:160px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
min-height:100%;
border-color:#FF1FFF;
border-width:medium;
}

E Per quanto riguarda la visualizzazione su FireFox??

Grazie Mille.

[Mich_]

Stai facendo una gran confusione con formattazione HTML insieme a formattazione HTML.
Se vuoi fare una cosa fatta bene devi:
1. spostare tutte le formattazioni nel CSS (nell'HTML non ci devono stare attributi di formattazione)
2. eliminare quelle assurde tabelle nel menu. I menu si fanno con le liste, non con quegli accrocchi di codice

[Nebula88]

Sono un principiante, mi faresti un esempio?

[Mich_]

Non posso spiegarti qui la teoria.
Ti faccio esempi di formattazione HTML, che va trasformata in equivalente formattazione CSS:
border="0" width="100%"
align="center"
border="0"

Per il menu, trovi molti esempi fatti con i CSS tra i "link utili" (sezione menu).