Salve ragazzi!
Sto creando un sito e mi sono imbattuto in questo problema che non sono riuscito a risolvere cercando in internet, perciò chiedo a voi

Nella mia pagina c'è un div #Navi con all'interno un'altro div .Sx
Sx serve per creare un bordo a sinistra di Navi, perciò deve avere la stessa altezza, ed è qui che il css non fa quello che vorrei: su browser tipo chrome e FF il div Sx prende height:100% e tutto è a posto, mentre (naturalmente) su IE il div Sx non si prende l'altezza giusta, ma una inferiore, non ricoprendo tutto il bordo.

Il codice è questo:
codice:
<div id="Navi">
     Un po di testo, che non ha lunghezza fissa ma cambia da pagina a pagina
     <div class="Sx"></div>
</div>

CSS:
div #Navi{
	background:url(../images/bg.png) repeat;
        width:513px;
	position:relative;
	top:16px;
 }
div #Navi .Sx{
	background-image:url(../images/navi_sx.png);
	background-repeat:repeat-y;
	width:7px;
	height:100%;
	position:absolute;
	top:0px;
	left:-7px;
 }
Penso che questo sia dovuto al fatto che Navi non ha altezza fissa...
Qualcuno mi può aiutare??

PS: Ho visto una soluzione che si basava su javascript, ma preferirei evitarla se possibile

GRAZIE a tutti in anticipo!!