CSS I.E. 6/7 [problema]

Salve, ho riscontrato un problema con il css passando da internet explorer 6 al 7!
In pratica se modifico affinchè il layout si veda bene con il 6, il layout mi si muove e si vede male nel 7! Ho IE 6, per cui devo chiedere ad altri di controllare per me :(

Ecco una pagina d'esempio: www.jenniferband.com/home.php

Con IE 6 il layout si vede male e spostato, mentre mi dicono che con il 7 si vede bene....come posso fare per sistemare entrambi??

Vi allego il css, questo è tutto il layout, che con firefox si vede bene

Codice:

---

body
{background-color:#e1e1e1;
background-image: url('/images/bg.jpg');
background-repeat: repeat-y;
background-position: center;

}

* {margin: 0;
    padding: 0;
    font-family: verdana;
    /* color: #000000; */
    font-size: 10px;
}

.title_ {
color: #ff8a00;
font: bold 11px Verdana;
text-align: left;
margin-right: 20px;
margin-left:20px;
padding-top:20px;
padding-bottom:20px;
background-image:url('/images/frecce_title.gif');
BACKGROUND-POSITION: LEFT CENTER;
BACKGROUND-REPEAT:NO-REPEAT;
background-color:#ffffff;
PADDING-LEFT:20PX;
}


.title {

    background-position: left;
    background-repeat: no-repeat;
    font-family: Verdana, "Times New Roman", Times, serif;
    font-size: 13px;
    color: #ff8a00;
    font-weight: bold;
    margin-bottom: 0px;
    padding-left: 17px;
    padding-top: 2px;
    text-align: left;
}

 .titoletti {


    font-family: Verdana, "Times New Roman", Times, serif;
    font-size: 13px;
    color: #ff8a00;
    font-weight: bold;
    margin-bottom: 0px;
    padding-left: 17px;
    padding-top: 2px;
    text-align: right;
background-color:#e1e1e1;
}


.content {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: verdana;
    color: #000000;
    font-size: 10px;
}
.foot {
    margin: 0;
    padding: 0;
    font-weight:bold;
    text-align: center;
    font-family: verdana;
    color: #000000;
    font-size: 10px;
}
a {
    margin: 0;
    padding: 0;
    font-family: verdana;
    color: #b6d223;
    text-decoration:none;
    font-size: 11px;
}


a:visited,
{
color: #ff8a00;
font-weight: none;
text-decoration:underline; }

a:hover 
{
cursor: cross;
font-weight: bold;
background-color: #CCCCCC;
color:#ff8a00;
 text-decoration:underline;}


#middle_bar {
    width: 500px;
    float: left;
    border: 0px;
    position: center;
    background-color: #ffffff;
      margin-left: 105px;
}



#middle_bar p {

    padding: 5px;
 
    border: 0px;
    margin: 1px;
   
}


#right_bar {
    width: 290px;
    float: left;
   
    background-color: #FFFFFF;
    border: 0px;


}
#main {
    width: 1007px;
   
        margin: 0 auto;

  }
 
#menu {
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 15px;
    font-family: verdana;
    margin-top: 0px;
}



#menu ul li {
    display: inline;
}

#menu h1 {
    display: inline;
}

#content {
    width: 800px;
    margin: 0 auto;
}







#footer {
    clear: both;
}



img {
    border: 0;
    border-color: #FF8A00;
}

#footer {
    text-align: center;
    padding-top: 10px;
}



#header {
text-align: center;
margin-top: 20;
padding-top: 0;
}

HR {
color: #000000;

}

h1 {
font-size: 15px;

}

.button

{background-color: #ffffff;
background-image: url('/images/search.jpg');
border-color: ff4d4d;
border-width:0px;
width:88;
color: #ff4d4d;
height:22;
font: bold 11px Verdana;
text-decoration: none;
}
.button1

{background-color: #ffffff;
background-image: url('/images/text_fill.jpg');
border-color: ff4d4d;
border-width:0px;
width:150;
color: #ff4d4d;
height:22;
font: bold 11px Verdana;
text-decoration: none;
}

---

questo è invece l'hack con IE

Codice:

---

body {

background-image: url('/images/bg.jpg');
background-repeat: repeat-y;
background-position: center;
}



#middle_bar {
    width: 500px;
    float: left;
    border: 0px;

    background-color: #ffffff;

}

---

ora se aggiungo in middle bar

Codice:

---

margin-left: 54px;

---

funzione con IE6, se lo tolgo, si vede bene solo con 7 ..

come posso fate? ç_ç

intanto, se devi provare la tua pagina con altri browser (in particolare IE7), esistono servizio di screenshot con particolari browser (vedi in alto nella pagina).

Poi, IE6 è noto per avere una riga di problemi, e mantenere la compatibilità non è semplice. Un principio che può aiutarti è: "IE6 scapoccia se cerchi di dare margin e padding ad elementi a cui hai attribuito una larghezza con width: nnnpx".

Se riesci a modificare il tuo sito in modo che questo non accada (ad esempio dando padding ad un "contenitore" invece di width e margin al "contenuto") questo dovrebbe salvarti un po' di lotta con IE6

prima di tutto, grazie per la risposta e il link per le screen shots....stando a quel sito però il sito si vede benissimo con entrambi i browsers!!! :S

mha!!! tenterò di modificare il codice..anche se ho provato con padding e margin e ne è uscito un terzo animale >__>