Layout che sballa con ie

[Polley]

non capisco una cosa :rollo:

ho fatto un layout con photoshop, ritaglio lo sfondo e lo metto nel body che si ripete in altezza e forma delle righe
la parte centrale basta inserirla in un div con un allineamento dell'immagine al centro ed automaticamente si aggancia alle linee e fin qui funzionava ma ora no

dopo aver smanettato conil css ho scoperto che se non dò al div una lunghezza ie lo scentra di 1px sembrerebbe invece se dò una lunghezza di molto superiore all'immagine ecco che si centra come mai ?

body
{
margin: 0;
padding: 0;
background: url() repeat-y center;
{

cosi non và

div
{
margin: 0;
padding: 0;
height: 100px;
background: url() no-repeat center 0;
}

cosi invece và

div
{
width: 1000px;
margin: 0;
padding: 0;
height: 100px;
background: url() no-repeat center 0;
}

l'immagine è di 700px per rendervi l'idea come mai ?
ho provato con:
width: 100%;
width: 100% auto;
width: auto;

poi ho messo i margin: 0 auto;

come mai non centra l'immagine se il div è libero nel body ?

[aedo]

non ho capito nulla.

puoi mettere un link all'esempio?

[Polley]

ce l'hò in locale !

rispiego in due parole

prendi un'immagine di lunghezza 1024 e salvala dopodichè la metti nel body con

margin: 0 auto;
padding: 0;
background: url() no-repeat center 0;

prendi il pezzo centrale da 700px della stessa immagine e lo salvi dopodichè lo metti in un div nel body

margin: 0 auto;
padding: 0;
background: url() no-repeat center 0;

l'immagine su IE si sposta di 1px a destra e non combacia con quella sotto
se invede dò una larghezza di 700px al div si centra perchè ?

margin: 0 auto;
padding: 0;
width: 700px;
background: url() no-repeat center 0;


come dal primo post le ho provate tutte

[thomas_anderson]

Perchè non provi ad inserire delle misure relative al contenitore? ad esempio:

#container {
width: 90%;
background: url(sfondo.jpg) no-repeat top left;
}

Fra l'altro è anche più pratico: ridimensionando la finestra del browser l'immagine non uscirà dal contenitore ne si sovrapporrà ad altro. ciao

[Polley]

infatti stavo provando e funziona cosi si vede anche con risoluzione a 800 però sballano i div interni

praticamente stò provando cosi, sono tre immagini in scalare:

<div id="Intestazione">
<div id="Primo">prova</div>
<div id="Secondo">prova</div>
</div>

#Intestazione
{
margin: 0 auto;
padding: 0;
width: 90%;
height: 300px;
background: url(01.png) no-repeat center bottom;
}

#Primo
{
margin: 0;
padding: 0;
height: 100px;
background: url(02.png) no-repeat center 0;
}

#Secondo
{
margin: 0;
padding: 0;
height: 100px;
background: url(03.png) no-repeat center 0;
}

Il secondo div scazza, il primo è centrato perchè ? :rollo: