Piccoli problemi di rendering con IE6

[samiel]

Con IE6 ho due problemi di rendering in questa pagina:
http://samiel.netsons.org/teatro2/comenato.html
1. la barra di navigazione a destra ha lo sfondo grigio scuro,
ma esso non si estende fino a #footer, interrompendosi
poco sotto il testo, cosicché si vede il mero di #container.
2. in #content, il testo appoggia proprio alla fine del riquadro
grigio, il che è brutto, mentre altri browser lasciano
un po' di spazio sotto. 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:auto; margin-top:2em; text-align:left; border-right:double #CECECE; border-left:double #CECECE; background:#323232; color:#BBB; display:inline-block;}

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

/*stili per la navigazione menu header*/
div#navbar_wrapper {width:auto; height:auto; margin:auto; background-color:black; border-bottom:double #CECECE;}
div#navbar ul{list-style:none; margin:0; padding:18px; text-align:center;}
div#navbar li{display:inline; margin:3px; padding:0; border:4px;}
div#navbar a{background:#A4A4A4; color:white; margin:0; padding:4px; text-decoration:none;}
div#navbar a:hover{background:#A4A4A4; color:black; text-decoration:underline;}
div#navbar a#activelink_nb{background:white; color:black; font-weight:bold;}

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

/*stili 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:2em 0 0.5em 0.5em; padding:0; list-style-type:none;}
div#navigation li{margin:0; padding:0.5em; border-bottom:1px solid #CECECE; text-align:right;}
div#navigation a{background:#323232; color:#5F5F5F; font:normal bold 1em/1em arial,sans-serif; text-decoration:none;}
div#navigation a:hover{background:#323232; color:#C1C1C1; text-decoration:underline;}
div#navigation a#activelink_nv{background:#323232; color:white; text-decoration:none;}

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

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

C'è qualche trucco per risolvere?

Grazie
M.

[samiel]

Ho provato una tecnica più "complicata", ma senza esito, ovvero inserendo
un'immagine di sfondo che avrebbe dovuto "riempire il buco". Questo i lcodice:

 /*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:82%; margin:0 auto; margin-top:2em; text-align:left; border-right:double #CECECE; border-left:double #CECECE; /*background:#323232; color:#BBB;*/ background: url(background.jpeg) repeat-y 80% 0; display:inline-block;}

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

/*stili per la navigazione menu header*/
div#navbar_wrapper {margin:0 auto; background-color:black; border-bottom:double #CECECE;}
div#navbar ul{list-style:none; margin:0; padding:18px; text-align:center;}
div#navbar li{display:inline; margin:3px; padding:0; border:4px;}
div#navbar a{background:#A4A4A4; color:white; margin:0; padding:4px; text-decoration:none;}
div#navbar a:hover{background:#A4A4A4; color:black; text-decoration:underline;}
div#navbar a#activelink_nb{background:white; color:black; font-weight:bold;}

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

/*stili 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; color:white;}

/*stili per la navigazione*/
div#navigation ul{margin:2em 0 0.5em 0.5em;list-style-type:none;}
div#navigation li{margin:0; padding:0.5em; border-bottom:1px solid #CECECE; text-align:right;}
div#navigation a{background:#323232; color:#5F5F5F; font:normal bold 1em/1em arial,sans-serif; text-decoration:none;}
div#navigation a:hover{background:#323232; color:#C1C1C1; text-decoration:underline;}
div#navigation a#activelink_nv{background:#323232; color:white; text-decoration:none;}

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

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

La cosa che non capisco è che IE6 continua a farmi la colonna di navigazione breve.
Inoltre: avendo io inserito una linea doppia chiara come border-top per il footer,
con IE6 essa è posizionata solo alla base della colonna di navigazione
e non invece sopra il footer stesso. C'è una via d'uscita? Da ieri ci sto impazzendo...

Grazie
M.