DIV allineati diversamente con browser diversi

[blp]

Ciao a tutti,

sto lavorado al sito internet, ma ho qualche problema di visualizzazione con i vari browser.

Ecco quello che voglio ottenere:

 
+----[...]------------------------------------------------+
|                                                         |
|                                                         |
: +---top-----------------------------------------------+ :
: |+-------------------------top-menu----------------+  | :
  ||                                                 73 |
  |+----------------847------------------------------+  |
  |+-----------------------+ +--top-container-right--+  |
  ||                       | |                       |  |
  ||                       | |+---------------------+|  |
  ||                       | || right-top          50|  |
  ||                       | ||                     ||  |
  ||  top-container-left   | |+--------------391----+|3 |
  ||                       | |+---------------------+|2 |
  ||                       3 ||                     ||0 |
  ||                       2 || top-container       ||  |
  ||                       0 ||  -right-bottom      2|  |
  ||                       | ||                     7|  |
  ||                       | ||                     0|  |
  ||                       | ||                     ||  3
  ||                       | ||                     ||  9
  ||                       | |+---------------------+|  3
  |+---455-----------------+ +-----------391---------+  |
  +---------------847-----------------------------------+

CSS:

#top {
    width: 847px;
    height: 393px;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
}

#top-menu {
    width: 847px;
    height: 73px;
    color: #e0d5c3;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    background: #422d28 url('../imgs/top.png') no-repeat bottom right;
    border-bottom: 1px solid #ffffff;
}

#top-menu h4 {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    color: #e0d5c3;
    font-size: 3em;
    font-family: Sylfaen;
    text-indent: 20px;
}

#top-container-left {
    width: 455px;
    height: 320px;
    float: left;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #efebe0;
}

#top-container-right {
    width: 391px; 
    height: 320px;
    float: right;
    margin-top: 0px;
    margin-bottom: 0px;
    background: #c2b89b url('../imgs/right.png') bottom right no-repeat;
    border-left: 1px solid #ffffff;
    color: #524c3c;
    font-size: 24px;
    font-family: Sylfaen;
    text-indent: 50px;
}

#top-container-right-top {
    width: 391px;
    height: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
    background: #837a5c url('../imgs/bottom.png') top right no-repeat;
    color: #e0d5c3;
    font-size: 32px;
    font-family: Sylfaen;
    text-indent: 20px;
    padding-top: 20px;
}

#top-container-right-bottom {
    width: 391px;
    height: 270px;
    margin-top: 10px;
    margin-bottom: 0px;
    color: #524c3c;
    font-size: 24px;
    font-family: Sylfaen;
    text-indent: 30px;
} 

Codice HTML

[...]
    <div id="top">
        <div id="top-menu">[...]
        </div>

        <div id="top-container-left">[...]
        </div>

        <div id="top-container-right">
            <div id="top-container-right-top">[...]</div>
            <div id="top-container-right-bottom">
                <div>[...]</div>
            </div>
        </div>    
    </div>
[...] 

Cosa succede:

- Con IE7 e Firefox 3.0.5 lo vedo come vorrei.

- Con IE6 vedo i due container left e right che non sono allineati in particolare right é piu' lungo sembra che "top-container-right-bottom" cresca di 30 px.

+----------------------+
|                      |
+----------------------+
+-------------+ +------+
|             | |      |
|             | |      |
|             | |      |
|             | |      |
|             | |      |
+-------------+ |      |  +
                |      |  | 30px
                |      |  |
                +------+  +

- In piu' un mio amico visionandolo con Firefox non so ancora quale versione dice che per vederlo in modo corretto deve mettere a 390px #top-container-right e #top-container-right-top, ma questo disallinea l'header che ci sta sopra etc...

Qualche idea per risolvere il problema?

Grazie in anticipo per il vostro tempo e aiuto.

blp

[blp]

proprio nessuno???

[amyst]

Ti rispondo io perchè anche a me è capitata più o meno la stessa cosa, ma purtroppo per te non ho una soluzione precisa al problema.
Io avevo problemi con le dimensioni del testo . . cioè con IE7 lo vedevo per come lo avevo impostato,mentre con Firefox no e ho risolto modificando i parametri di grandezza da pt a px . . quest'ultima unità viene riconosciuta allo stesso modo da entrambi i browser.
Spero possa servirti da spunto . . .

[blp]

Grazie per la tua risposta...
il fatto é che non ho mai usato pt ma sempre px (o em per alcuni caratteri) ...

non sono riuscito ancora a capire come mai non lo vedo bene...