allineamento in ie6 non funziona?

[soffigo]

Ciao a tutti,
sto rifacendo la grafica di un sito e ho realizzato tutta la struttura in css.
Quando vado a verificare sui diversi browser come viene visualizzata la pagina, solo su ie6 mi dà problemi (nn allinea la pagina).
Il sito è
http://www.kopernik2.it/kop8/1.asp

Per chi non avesse ie6, allego l'immagine dell'errore.


Di seguito il codice interessato (se nn basta ditemi cosa postare)

#esterno {
border-left: 160px solid #90bade;
background-color: #FAFAFA;
}

#interno {
margin: 0;
width: 100%;
}

#contenuto {
float: left;
width: 100%;
min-width: 420px;
position: relative;
font: 100% Verdana, Geneva, Arial, Helvetica, sans-serif;
z-index: 12;
}

grazie.

[fcaldera]

questa volta non si può dare torto a IE...

hai un contenitore largo il 100% (della finestra del browser)
dentro dovrebbe starci il div button largo 160px e il contenuto largo invece il 100%;
ora poiché 100% < 160px + 100% i tuoi div non possono stare affiancati.

Sugli altri browser il min-width corregge la situazione ma su explorer non è supportato. Prova a vedere se questa discussione sul forum diodati.org può aiutarti

[soffigo]

Grazie per la spiegazione,effettivamente non avevo fatto caso alla ripetizione del 100%.
Nel link che mi hai suggerito non sono riuscito a trovare una soluzione, ma eliminando il width: 100% dal contenuto, è andato senza problemi.

Ora però il problema si sposta sulla visualizzazione del menu laterale sx (si vede nell'immagine del primo post e anche online http://www.kopernik2.it/kop8/1.asp) che su ie6 (e solo su quello, infatti sul 5.5 funziona) si vede più largo rispetto ad altri browser.
Ho provato per ore a capire perchè, ma non ci sono riuscito, chiederei ancora il vostro aiuto...
:master:


di seguito il codice incriminato:

#esterno {
border-left: 150px solid #90bade;
background-color: #FAFAFA; /* center column background */
}

#interno {
margin: 0;
width: 100%;
}

#contenuto {
float: left;
min-width: 420px;
position: relative;
padding: 5px 2px 2px 5px;
font: 100% Verdana, Geneva, Arial, Helvetica, sans-serif;
z-index: 12;
}

#button {
width: 150px;
padding: 0 0 0 0;
font-family: Tahoma, Arial, sans-serif;
/*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
font-size : 0.9em;
background-color: #90bade;
margin-left: -151px;
float: left;
position: relative;
z-index: 11;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
list-style-image: none;
}

#button li a {
display: block;
padding: 5px 0px 5px 5px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #3066e4;
color: #fff;
text-decoration: none;
width: 100%;
outline:none;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

#button li #active {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #000066;
}

#button li #active:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

ancora 1000 grazie.

[soffigo]

qualcuno può aiutarmi?

[soffigo]

dunque, ho ri-inserito il width 100 % al contenitore e successivamente ho scoperto che se nel box di sx riducevo la larghezza al 97%, ie6 (sempre e solo quello, ie5.5 nn ha problemi) nn andava a capo:

#button {
width: 150px;
padding: 0 0 0 0;
font-family: Tahoma, Arial, sans-serif;
/*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
font-size : 0.9em;
background-color: #90bade;
margin-left: -150px;
float: left;
position: relative;
z-index: 11;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
list-style-image: none;
}

#button li a {
display: block;
padding: 8px 0px 6px 5px;
background-color: #3066e4;
color: #fff;
text-decoration: none;
width: 97%;
outline:none;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
background-color: #2586d7;
color: #fff;
}

#button li #active {
background-color: #2586d7;
color: #000066;
}

#button li #active:hover {
background-color: #2586d7;
color: #fff;
}


perchè? qualcuno sa darmi un parere?