Problema inspiegabile con i CSS

[bebbbo]

Ciao a tutti...ho un problema che non riesco a risolvere.

Devo creare in una pagina un box tipo finestra windows all'interno del
quale inserirò poi i contenuti.
Per disegnare questo box uso dei DIV con un DIV contenitore al cui
interno creo 3 colonne (3 DIV) e in ognuna di queste colonne creo tre
righe (3 DIV) in modo da avere il DIV contenitore diviso in 9 box che
mi vanno a formare la mia bella finestra (angolo in alto a sx, barra
superiore, angolo in alto a dx, barra sx, contenuto della finestra,
barra a dx, angolo in basso a sx, bordo inferiore, angolo in basso a
dx).
Per gli angoli, la barra superiore, le due barre laterali e la barra
inferiore, uso delle immagini che metto come sfondo al div.
Il problema è che nonostante abbia definito le dimensioni dei div e le
dimensioni delle immagini siano esatte, mi succede che il div che
contiene la barra di sfondo mi viene 3 volte più alto di quello che
dovrebbe essere e quindi l'immagine della barra di sfondo (e dic
onseguenza anche quelle dei due angoli) mi si ripete orizzontalmente.

se imposto il background-repeat su repeat-x risolvo visivamente, ma mi
rimane cmq il problema che i 3 div in fondo sono più alti di quello
che dovrebbero.
Questo mi accade solo con IE (6) mentre con mozilla mi succede un'altra
cosa...praticamente è come se i 3 div di sfondo avessero un margin
negativo...perchè se aggiungo un'altra finestra sotto a quella, mi
accade che si va a collocare leggermente sotto a quella subito
sopra...ù

Un' altro modo con cui ho risolto è stato quello di impostare i 3 div
di fondo con la proprietà overflow impostata su hidden. Cosi risolvo
alla perfezione perchè i box risultano dell'altezza giusta ma rimane
cmq il problema sotto mozilla del margine negativo...

E poi vorrei capire perchè mi da questo problema...mi sembra di aver
scritto il codice alla perfezione.

Le immagini hanno le seguenti dimensioni:
form_top_left.gif 9x17
form_top_right.gif 11x17
form_top.gif 4x17
form_left.gif 9x4
form_right.gif 11x4
form_bottom.gif 4x7
form_bottom_left.gif 11x7
form_bottom.gif 4x7

Il codice html è il seguente:

<div class="sidebcontent">
<div class="sidebleft">
<div class="topsbl"></div>
<div class="centersbl"></div>
<div class="bottomsbl"></div>
</div>
<div class="sidebcenter">
<div class="topsb">DC STocks</div>
<div class="centersb"></div>
<div class="bottomsb"></div>
</div>
<div class="sidebright">
<div class="topsbr"></div>
<div class="centersbr"></div>
<div class="bottomsbr"></div>
</div>
</div>

Il codice del CSS è:

.sidebcontent{
width: 195px;
\width: 195px;
w\idth: 195px;
margin: 10px 0px 0px 0px;
padding: 0px;
border: 0px;
background-color: #FFFFFF;
}

.sidebleft{
float: left;
width: 9px;
\width: 9px;
w\idth: 9px;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #FF0000;
}

.sidebcenter{
float: left;
width: 175px;
\width: 175px;
w\idth: 175px;
padding: 0px;
margin: 0px;
border: 0px;
background-color: #00FF00;
}

.sidebright{
float: right;
width: 11px;
\width: 11px;
w\idth: 11px;
padding: 0px;
margin: 0px;
border: 0px;
background-color: #0000FF;
}

.topsbl{
width: 9px;
\width: 9px;
w\idth: 9px;
height: 17px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_top_left.gif');
}

.centersbl{
width: 9px;
\width: 9px;
w\idth: 9px;
height: 80px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_left.gif');
}

.bottomsbl{
width: 9px;
\width: 9px;
w\idth: 9px;
height: 7px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_bottom_left.gif');
}

.topsb{
width: 175px;
\width: 175px;
w\idth: 175px;
height: 17px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_top.gif');
}

.centersb{
width: 175px;
\width: 175px;
w\idth: 175px;
height: 80px;
margin: 0px;
padding: 0px;
border: 0px;
}

.bottomsb{
width: 175px;
\width: 175px;
w\idth: 175px;
height: 7px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_bottom.gif');
}

.topsbr{
width: 11px;
\width: 11px;
w\idth: 11px;
height: 17px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_top_right.gif');
}

.centersbr{
width: 11px;
\width: 11px;
w\idth: 11px;
height: 80px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_right.gif');
}

.bottomsbr{
width: 11px;
\width: 11px;
w\idth: 11px;
height: 7px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url('images/finestra/form_bottom_right.gif');
}

[bebbbo]

Ragazzi, nessuno mi sa aiutare?

Vi prego, ho bisogno di aiuto, è una cosa di lavoro e devo uscirne fuori entro la settimana

[pierofix]

Un piccolo consiglio: così come è importante per la buona riuscita di un documento web (ma non solo), anche qui sul forum la chiarezza gioca un ruolo chiave.

Forse è meglio se riorganizzi la tua richiesta d'aiuto evidenziando meglio il problema, eliminando tutte le parole superflue e le porzioni di codice che sicuramente non centrano nulla. Meno rumore c'è più è semplice capirsi.

E ancora, quando pubblichi del codice, usa i tag appropriati del forum: ti permettono di indentare e dare così maggior chiarezza all'insieme.

Nei casi come i tuoi conviene forse estrapolare un problema fittizio e molto più sintetico - giocando sugli elementi chiave - che rispecchi il tuo: questo è forse il modo migliore per eliminare le parti superflue e concentrarsi sul problema reale.

[bebbbo]

Non so come estrapolare meglio il codice...ho inserito la parte di codice incriminata e il CSS di riferimento.

Credo poi di aver spiegato bene quale problema mi da, ma forse mi sbaglio, mi dici cosa secondo te non è chiaro?

[pierofix]

Le cose che non mi sono chiare sono le seguenti:

1. Cosa intendi per &laquo;box tipo finestra windows&raquo;?
2. Non riesco a visualizzare visivamente la conformazione che la pagina dovrà avere alla fine: sarebbe magari utile fare un piccolo disegnino e allegarlo al post. In tale disegno sarebbe poi bene inserire dei punti di riferimento che puoi identificare e richiamare dal testo del tuo messaggio.
3. Potresti organizzare il testo in almeno due porzioni: una per i problemi con IE, l'altra per i problemi con FF; a mio avviso aiuterebbe a concentrarsi su un punto per volta.
4. Potresti commentare il codice nelle parti che ti generano più dubbi, così da non far perdere chi deve aiutarti nelle tante righe di codice postate. Sempre sull'argomento, inserisci il codice negli appositi tag del forum: lo renderai molto più leggibile e comprensibile. Un esempio?

   body {
      color:#000;
      margin-top:0;
   }
   img {
      float:left;
      margin-left:0; /* Perche' con IE continuo a vedere il margine??? */
   }

[bebbbo]

Ok, sei stato chiarissimo

Mi adopero subito e posto magari qualche piccola immagine e speriamo di uscirne fuori

[bagu]

metti la pagina online, immagini comprese...
tutto diventa più semplice da analizzare

[bebbbo]

è l'employee portal di una grande multinazionale, non posso metterlo online, sono info riservate.

Vedo di ricreare una pagina anonima che riproduca il problema e ve la metto online al più presto

[bebbbo]

Fatto

Trovate la pagina a questo url: http://bebbbo.250free.com

Per prima cosa si vede subito il problema con IE dell'immagine di sfondo della finestra sulla dx che si ripete verticalmente quando non dovrebbe perchè il DIV è impostato nel CSS esattamente come le dimensioni verticali dell'immagine.
Mentre su Firefox il problema non si pone.

Secondo problema è che nonostante io abbia impostato il margin-top a 10px per la classe .sidebcontent, ottengo la spaziatura di 10 cm solo sulla prima finestra a dx, mentre quella sotto non risulta distanziata.

Infine, nonostante abbia impostato l'height a "auto", se aggiungo un'altra riga con scritto "prova" nella finestra, questa mi sballa tutta.

Il CSS si chiama style4.css ed è nella root directory.

Grazie