Problemi di rendering (o di risoluzione?)

[samiel]

Ho sistemato qualcosa in queste pagine e le ho verificate su diversi browser
che ho installato sotto Linux (Iceweasel, Konqueror, Opera, Epiphany).
La resa è soddisfacente, ma qui la risoluzione è a 1280.
Invece su Windows - dove la risoluzione è 1024 ho dei problemi.
IE 6 mi fa scendere tutto il menu di navigazione sotto #content,
mentre in IE 7 e Firefox 2 il menu di navigazione è posizionato correttamente,
ma è più lungo del contenuto. Ecco il codice:

/*stili per il layout*/
html,body{margin:0; padding:0;}
body{font-family:"Lucida Sans Unicode",sans-serif; font-size:120%; text-align:center; background:black;}
div#container{width:80%; margin:0 auto; margin-top:2em; text-align:left; border-right:double #CECECE; border-left:double #CECECE; background:#323232; color:#BBB;}

/*stili su header*/
div#header{background-color:black; color:white;}
div#header h1{padding:20px 20px 40px 20px;}

/*stili specifici per il layout*/
div#navigation{float:right; width:20%; background-color:#323232; color:#CECECE;}
div#content{float:left; width:80%; background-color:#444444; color:#CECECE;}
div.center img{display:block; margin:0 auto; text-align:center;}

/*stili specifici per #content*/
h1,h2{margin:0;padding:0}
div#content h1,h2,p{padding:0 25px 0;}
div#content h1,h2{margin-top:1.5em;}

/*stili per la navigazione*/
div#navigation ul{margin:1em 0 1em 1em; padding:0; list-style-type:none;}
div#navigation li{margin:0; padding:1em; border-bottom:1px solid #CECECE;}
div#navigation a{color:#5F5F5F; font:normal bold 1.2em/1.6em arial,sans-serif; text-decoration:none;}
div#navigation a:hover{color:#C1C1C1; text-decoration:underline;}
div#navigation a#activelink{color:#E7E7E7; text-decoration:none;}

/*stili specifici su footer*/
div#footer{clear:both; padding:0.5em; background-color:black; color:#CECECE;}

/*stili caratteri*/
.bold{font-weight:bold;}
.italic{font-style:italic;}
.underline{text-decoration:underline;}
.emph{color:red;}

Mi sapreste suggerire dove intervenire?

Grazie
M.

[samiel]

Ops... ecco li link:
http://samiel.netsons.org/teatro/index.html

[Erith]

Ciao!
Questo accade perchè hai impostato div#container{width : 80%; }

quindi 80% rispetto al body del documento, e arrivando a basse risoluzioni il container non riesce più a contenere la barra di navigazione.

usa width : 780px; (ho già provato e non sballa nulla) nel container in modo da visualizzarlo bene anche a basse risoluzioni come 800x600.

Ciao

Antonio

[samiel]

Grazie, adesso provo. Prima avevo trovato di mio una soluzione elementare:
ridurre la percentuale di #content a 75%, in modo da far più spazio a lato
per la barra di navigazione.
Ma... mi interesserebbe capire... quando le misure sono percentuali o, meglio
ancora, sono in em, come si fa a capire a priori che cosa ci sta e che cosa no
a certe risoluzioni? Cioè: l'unica via è munirsi di calcolatrice?
Poi ho un altro problema, ma aprirò un tread apposito.

Grazie
M.