Problema padding con IE6

[ivanisevic82]

Avevo chiesto una mano in "html" ma la sezione giusta è css, mi sposto qui.

Ho un problema nella visualizzazione di un sito in IE6, molto probabilmente legato al fatto che questo browser legge il padding in maniera differente dagli altri.

Vi copio il codice "semplificato" e poi vi faccio vedere come viene visualizzato in entrambi i browser.

HTML

<div id="ContainerTotale">
<div id="Container">
<div id="ColonnaSinistra"></div>
<div id="ColonnaDestra"></div>
<div id="Content"></div>
</div>
<div id="footer"></div>
</div>

CSS

#ContainerTotale{
margin: 0px auto; 
width:980px;
position: relative; 
}

#Container{ 
width:960px;
padding-right: 10px;
padding-left: 10px;
}

#ColonnaSinistra {
float: left;
width: 200px;
}

#ColonnaDestra{
float: right;
width: 200px;
} 

#Content{
margin-left: 200px;
width: 560px;
height: 135px;
}

La visualizzazione è corretta su FF e su tutti i browser moderni:



Ma non su IE6, dove il contenuto della colonna centrale (content) comincia SOLO dopo la fine della colonna di destra:



Potete darmi una mano?

Sto davvero impazzendo!

Grazie!

[emnlmn]

Perchè non rendi float:left anche content, elimini il suo margine destro, e lo sposti prima di colonna-destra nel codice html?
Il problema che potrebbe insorgere è che Container perda l'altezza, in quanto tutti i blocchi che contiene sono float, questo lo risolvi con overflow:hidden per tutti i browser tranne ie6 e precedenti (che cmq a causa di un bug, si comporterà in modo "standard", in quanto almeno una dimensione del blocco è già stata dichiarata).

Se hai dubbi chiedi pure.

[ivanisevic82]

Originariamente inviato da emnlmn
Perchè non rendi float:left anche content, elimini il suo margine destro, e lo sposti prima di colonna-destra nel codice html?
Il problema che potrebbe insorgere è che Container perda l'altezza, in quanto tutti i blocchi che contiene sono float, questo lo risolvi con overflow:hidden per tutti i browser tranne ie6 e precedenti (che cmq a causa di un bug, si comporterà in modo "standard", in quanto almeno una dimensione del blocco è già stata dichiarata).

Se hai dubbi chiedi pure.

Che bello, grazie mille mille mille!!!
Funziona!!!!!

Era da un sacco che cercavo di risolvere, sono davvero contento!

Resta solo qualche problemino relativo allo spazio in altezza che resta in IE6 tra un div e un altro, vedrò di risolverlo, casomai torno qui.

Grazie ancora!!!

[emnlmn]

Figurati .

[ivanisevic82]

Dato che ci siamo ti faccio vedere al volo, se no magari ci perdo 2 ore e in realtà ci volevano due minuti...

http://ivanisevic82.netsons.org/page...ra-mission.php

Guarda il link: in FF è tutto ok; il IE resta solo un piccolo problema: tutta la parte sotto il menu orizzonatale in alto è staccata dal resto di circa 10px (a occhio)...

Da cosa può dipendere?

Grazie infinite!

[ivanisevic82]

Alla fine ho risolto con un comando condizionale, aggiungendo delle regole css apposite per IE6, in pratica un margin-top: -16px (lo spazio che avanzava in alto).

Spero che non sia una soluzione troppo "brutale"!

Grazie ancora per il supporto!