Div in posizione assoluta disallineato

[jesus]

Ho una pagina html strutturata cosi:

<div id="container">
  <div id="header"><h1>Titolo</h1></div>
  <div id="corpo">
    <div id="contenuto">...</div>
    <div id="menu-barra">...</div>
  </div>
  <div id="footer">...</div>
</div>

ed il relativo css:

body {
  margin: 0px 0px 0px 0px;
  font-size: 10px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: black;
}
#header {
  margin: 0px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
  background-color:Silver;
}
#corpo {
  position: relative;
}
#menu-barra {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 150px;
  margin: 0px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
  background-color: Lime;
}
#contenuto {
  margin: 0px 0px 0px 150px;
  padding : 0px 0px 20% 0px;
}
#footer {
  padding : 0px 0px 0px 0px;
  background-color:Silver;
}

In Internet Explorer 6 il div menu-barra non viene posizionato correttamente. Infatti in mozilla 1.6 e Opera 7.5 viene visualizzato correttamente a sinistra, mentre in explorer viene spostato più al centro, per quale motivo???

Aiutatemi per favore, sto diventando pazzo :master:

[jesus]

up

[Marcolino's]

Il motivo è explorer, ha un altro tipo di ricalcolo della dimensione del box model, in poche parole hai dato al #contenuto un margine a sinistra di ben 150px e quindi IE te li somma al contenuto di left dato nel posizionamento assoluto di menu-barra, ovvero nel tuo caso 150 pixel + 0 pixel = 150 pixel verso destra della barretta verde.

puoi usare un hack per explorer, ovvero lasci tutto com'è e alla fine del file CSS aggiungi queste righe:

* html body #menu-barra {
position relative;
margin-left: 0;
}

e vedi che succede, in questo modo ne opera e ne mozilli vari possono leggere l'hack ma solo le versioni di explorer.
E' il trucco che ho usato per posizionare al millimetro i vari box nella pagina dei bookmark che vedi nella mia firma.

ciao.

[Jerry Masslo]

dipende dal margin di #contenuto

non mi chiedere perché non dovrebbe avere nessuna relazione col layer ma se lo metti a zero va a posto.

vedi tu come ti conviene aggirare il problema, ad esempio danto anche a #contenuto un position:relative e al posto del margin un left:150px;

misteri di iexploder.

[Jerry Masslo]

Originariamente inviato da Marcolino's
Il motivo è explorer, ha un altro tipo di ricalcolo della dimensione del box model, in poche parole hai dato al #contenuto un margine a sinistra di ben 150px e quindi IE te li somma al contenuto di left dato nel posizionamento assoluto di menu-barra, ovvero nel tuo caso 150 pixel + 0 pixel = 150 pixel verso destra della barretta verde.

Marcolino's, non mi convince molto la tua spiegazione, il layer e il div non dovrebbero avere nessuna dipendenza, ognuno è per i fatti suoi, però trattandosi di ie non mi stupisco di nulla.

[Marcolino's]

Layer = div

Leggiti come Ie somma il box model.

[Jerry Masslo]

Originariamente inviato da Marcolino's
Layer = div

co sti layer non fare confusione è un'impresa , un layer può anche essere un div ma un div non è necessariamente un layer.

Leggiti come Ie somma il box model.

Così mi confondi ancora di più il margin non è interessato alla problematica del box model, lo sono il padding e il border, inoltre, ciò dovrebbe riguardare i calcoli sul div col margin mentre un margin in un div influenza un layer che condivide con quel div solo il div che li contiene. Per come dici tu dovrebbe essere la conseguenza di una precisa scelta, calcolare a quel modo diverso dallo standard, invece qui sembra un bug, l'interpretazione di ie del box model per quanto fuori standard ha una logica, qui non ne vedo nessuna.

[floyd46]

<div id="container">
<div id="header"><h1>Titolo</h1></div>
<div id="corpo">
<div id="contenuto">...</div>
<div id="menu-barra">...</div>
</div>
<div id="footer">...</div>
</div>

qui hai scritto l'impostazione della pagina;
nel codice CSS non hai dichiarato il div#container (che funge da scatola, no?)
Distrazione oppure hai omesso completamente il codice CSS?
Inoltre ho provato in una pagina htm tutto il codice che hai postato qui ma non ho avuto molto tempo per vedere cosa c'era che non andava; in effetti il div# con il colore "lime" assumeva uno stranissimo posizionamento,cioè sotto il footer;
cmq ti chiedo come mai usi il posizionamento assoluto (liberissimo, x carità);
come giustamente hai fatto tu, hai un div#container e dentro ci metti tutti gli altri #div;
potresti ottenere il risultato con il "float", o sbaglio?