CSS problemi con IE

[Miroku]

Ciao a tutti, io ho una pagina con i miei livelli.
Tutto quello contenuto nel maincontainer deve essere centrato e già qui IE me lo mette a sinsitra o_ò
Un altro problema è che se voglio impostare la larghezza di un livello con dei bordi con Opera e Firefox devo sottrarre la grandezza dei bordi mentre con IE no...

come posso fare in modo che si visualizzi tutto nel modo corretto? o_ò

body{
background:#000000;
margin:0px;
}

#maincontainer{
background:url(../layout/sfumatura.jpg) top center no-repeat;
width:1000px;
height:800px;
margin:auto;
}

#logo{
background:url(../layout/logo.png) top center no-repeat;
width:1000px;
max-height:218px;
padding-top:170px;
}

#colonnesfondo{
width: 840px;
margin-top:8px;
background:url(../layout/SfondoColonneCompleto.png) top no-repeat;
}

#colonnagrandesfondo{
width: 840px;
margin-top:8px;
background:url(../layout/SfondoColonnaUnica.png) top no-repeat;
}

#colonne{
width: 840px;
}

#colonnasx{
background: url(../layout/SfondoBiancoTrasp.png);
float:left;
width:400px; /*ovvero 400px - 2px di bordo (destro e sinistro)*/
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
border-top: 1px #FFFFFF solid;
}

#colonnadx{
background: url(../layout/SfondoBiancoTrasp.png);
float:right;
width:400px;
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
border-top: 1px #FFFFFF solid;
}

#basecolonne{
background: url(../layout/SfondoBaseColonne.png) top center no-repeat;
width:840px;
max-height:231px;
clear:right;
padding-top:31px;
}

#menu{
background: url(../layout/SfondoBiancoTrasp.png);
float:left;
width:198px; /*ovvero 400px - 2px di bordo (destro e sinistro)*/
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
border-top: 1px #FFFFFF solid;
}

#colonnaGrande{
background: url(../layout/SfondoBiancoTrasp.png);
width:838px;
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
border-top: 1px #FFFFFF solid;
}

#basecolonnaGrande{
background: url(../layout/SfondoBaseColonnaGrande.png) top center no-repeat;
width:840px;
max-height:231px;
padding-top:31px;
}

<div id="maincontainer" align="center">
  <div id="logo" align="center">[img]layout/menu.png[/img]
    <map name="Map" id="Map">
      <area shape="rect" coords="327,17,374,35" href="sezione.html" />
      <area shape="rect" coords="806,17,853,35" href="sezione.html" />
      <area shape="rect" coords="560,17,621,35" href="sezione.html" />
      <area shape="rect" coords="440,17,501,35" href="sezione.html" />
      <area shape="rect" coords="687,17,734,35" href="sezione.html" />
      <area shape="rect" coords="207,17,254,35" href="index.html" />
    </map>
  </div>
  <div id="colonnesfondo">
      <div id="colonnasx">

        

        

      </div>
      <div id="colonnadx">

        

        

      </div>
    <div id="basecolonne" align="center">[img]layout/disco_ball.gif[/img]</div>
  </div>
</div>

Grazie mille in anticipo.

[simulacron]

Dunque: fa i css come se l'utente avesse sicuramente Firefox Opera....
Se funzionano, riaprili e comincia le aggiunte posposte ai commenti condizionali che verificano la versione di IE o usando quei trucchetti per fare digerire i css anche a IE 5,5/6/7....
Inserisci nel campo di ricerca dei motori di ricerca css And IE (o internet explorer)....
Dovresti trovare esempi e suggerimenti....
Se non ci riesci riscrivi....Vedremo di fare qualcosa.
Ripassare certe cosa fa sempre bene....

[Miroku]

mmmh ho provato delle cose trovate su internet (tipo il html>body{..} e il ) ma non cambia nulla =\

[simulacron]

Originariamente inviato da Miroku
mmmh ho provato delle cose trovate su internet (tipo il html>body{..} e il ) ma non cambia nulla =\

Cercati qualcosa sul box model.....e tieni presente (spero di non sbagliare....)
Che in IE dovrebbe essere:
dimContenitore = spessoreBordi(2bordi ogni direzione!....)+marginiInterni(=Padding)+Dimension i (esterne) contenuto...
Gli altri....trascura i padding....

Verifica quello che ti ho detto....

[Miroku]

mmmmh

ho provato un po' di box model hack... ma sembra che IE7 ne sia diventato immune =\
eppure l'errore della larghezza dei box ce l'ha cmq! =.=

ma non mi spiego nemmeno il fatto che nonostante l'align="center" del maincontainer IE7 me lo visualizza a sinistra o_ò

[mic]

Originariamente inviato da Miroku
mmmmh

ho provato un po' di box model hack... ma sembra che IE7 ne sia diventato immune =\
eppure l'errore della larghezza dei box ce l'ha cmq! =.=

ma non mi spiego nemmeno il fatto che nonostante l'align="center" del maincontainer IE7 me lo visualizza a sinistra o_ò

ciao. per il problema dell'allineamento...non ti basta text-align:center; al body???
per l'hacking con ie7, prova con *:first-child+html #nomeDiv
per quanto riguarda il discorso dei bordi...io purtropo ho fatto sempre il contrario di quanto fanno tutti prima per ie e poi adattavo per FF con !important. però ie7 lo riconosce.
spero di essere stata utile

[Miroku]

Originariamente inviato da mic
ciao. per il problema dell'allineamento...non ti basta text-align:center; al body???

no perchè anche gli altri livelli al suo interno devono essere al centro... o il text-align allinea anche i livelli?

Originariamente inviato da mic
per l'hacking con ie7, prova con *:first-child+html #nomeDiv

l'asterisco per cosa starebbe? e dove lo dovrei mettere?

Originariamente inviato da mic
per quanto riguarda il discorso dei bordi...io purtropo ho fatto sempre il contrario di quanto fanno tutti prima per ie e poi adattavo per FF con !important. però ie7 lo riconosce.
spero di essere stata utile

cosa sarebbe !important?

Scusa tutte le domande, ma sto iniziando a impratichirmi di css ora ^_^;;;

[mic]

Originariamente inviato da Miroku
no perchè anche gli altri livelli al suo interno devono essere al centro... o il text-align allinea anche i livelli?

se devono essere anche gli altri al centro allora non dovrebbe cambiare nulla. ho fatto una prova guardando il tuo con ie6 ie7(via web) e ff e l'unica differenza è con il "mio" il maincontainer si sposta al centro

[
l'asterisco per cosa starebbe? e dove lo dovrei mettere?

supponiamo che tu debba fare hack per il div maincontainer, allora dovresti scrivere:
*:first-child+html #mailncontainer
dovrebbe essere così ma mi sono appena imbattuta in questa cosa

[
cosa sarebbe !important?

Scusa tutte le domande, ma sto iniziando a impratichirmi di css ora ^_^;;;

no problem, finchè riesco a rispondere
!important è hacking che viene utilizzato per far prendere dei valori a firefox e renderli "illeggibili" per ie6 (questo sicuramente)
supponiamo che tu definisca un

#miodiv{
margin-left:10px !important; /*per ie6*/
margin-left:0px; /*per ie6*/
}

non badare al senso di ciò che ho scritto, è un esempio
ps: ovviamente c'è chi potrebbe spiegare meglio e con più certezze

[Miroku]

domani provo come mi hai detto te ^_^

[Miroku]

Scherzavo.... l'ho provato subito =P
L'important funziona!!!
Non riesco ancora a centrare i miei livelli #logo e #sfondocolonne dentro al maincontainer in IE... incredibile o_ò