Posizionamento Relativo non funziona su IE

[MM88]

Ciao ragazzi, ho consultato diversi articoli, tra cui questo di HTML.it , ma non riesco ad allineare due div.

Il div contenitore ha questo codice:

#contenitore {
  margin: 0 auto;      
  text-align: center;        
   background-color: #000000;
   font-weight: none;
   width: 760px;
   border: Solid 0px #CCCCCC;
}

e nel codice html ho inserito all'interno di questo div, un altro div che ha una img come background:

#testata {
background:url(testata.png) no-repeat; 
position: relative;
left: 180px;
width: 400px;
height: 400px;
}

Con mozilla tutto appare perfettamente centrato.
Con IE (anche il 6.0), il LEFT è ignorato e il div con immagine appare sulla sinistra del div contenitore.


Considerando la compatibilità dei browser, quale è, dunque, la scelta migliore per centrare un div con immagine di sfondo all'interno di un altro div?


grazie

[fcaldera]

Originariamente inviato da MM88
...quale è, dunque, la scelta migliore per centrare un div con immagine di sfondo all'interno di un altro div?

sicuramente non usando i posizionamenti (visto che non è assolutamente necessario)


#testata {
background:url(testata.png) no-repeat;
margin: 0 auto;
width: 400px;
height: 400px;
}

[MM88]

Grazie, ora va benissimo.

Praticamente è il "margin: 0 auto;" che fa tutto.

Ma come influisce praticamente?



grazie

[fcaldera]

funziona esattamente come per il tuo div contenitore e il sistema può essere chiaramente annidato per enne contenitori

sull'ultimo (quello più annidato) dovrai ristabilire il text-align a left (a meno che tu non voglia mantenere il testo centrato)

[MM88]

Ti ringrazio per la spiegazione, però aggiungendo il valore "margin: 0 auto;" ad un div che ha già come specifiche:

padding-top : 40px;
padding-bottom : 10px;
padding-left : 150px;
padding-right : 150px;
text-align: justify;
font-size: 12px;
font-weight: none;
border: Solid 0px #CCCCCC;

se scrivo del testo, questo sarà centrato e giustificato, ma se richiamo delle immagini (non come background, ma <img src=...>, queste andranno comunque a sinistra.

perché?

grazie

[fcaldera]

Originariamente inviato da MM88

se scrivo del testo, questo sarà centrato e giustificato, ma se richiamo delle immagini (non come background, ma <img src=...>, queste andranno comunque a sinistra.

perché?

perchè le immagini non sono elementi blocco ma sono elementi inline e come tali non rispettano alcune proprietà come ad esempio i margin.

puoi però trasformarle in elementi blocco con display: block; e assegnare delle dimensioni (almeno quelle orizzontali altimenti non verrà centrata)

[MM88]

grazie ancora, ma "display: block;" e la lunghezza sono proprietà che devo assegnare al div che contiene le immagini?

grazie

[fcaldera]

Originariamente inviato da MM88
grazie ancora, ma "display: block;" e la lunghezza sono proprietà che devo assegnare al div che contiene le immagini?

grazie

no, i div sono già elementi block

il mio discorso era riferito solo alle immagini

[MM88]

Grazie ancora.

Cmq, è corretto inserire le immagini in un <P class="blocktext"></p> definito nel CSS con

 margin-left: auto;
    margin-right: auto;
    width: 6em

?

Perchè no notato che funziona molto bene in questo caso.


grazie