Background immagine sfalsata di 1px

**serialkiller** · 21-11-2008, 17:09

Stavo impaginando una grafica e mi ritrovo uno strano problema.

Allego le due immagini, una è la visualizzazione su Firefox e l'altra e su IE7, ma la cosa non cambia nemmeno su IE6.
Praticamente, guardando con attenzione il secondo foglio con i buchini, si nota che è leggermente sfalsato verso sx, creando così un non perfetto allineamento che si nota.

La parte (x)html interessata è:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XXXXXXXXXX</title>
<link media="screen" href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="immagini/favicon.ico" />
<meta http-equiv="Content-Language" content="it" />
<meta name="author" content="XXXXXXXXXX" />
<meta name ="copyright" content="XXXXXXXXXX" />
<meta name="robots" content="index, follow" />

</head>

<body>

<div id="header">
<h1 id="pippo">Pippo</h1>
</div>

<div id="navigation">

</div>
..........

ed il css interessato questo:

codice:

html,body,h1,h2,h3,h4,h5,p,form,ul,li,img {
margin:0;
padding:0;
border:none
}

html,body {
color:#333;
font-family: "Trebuchet MS", Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
text-align:center;
background:#F5F6F6 url(../immagini/body_bg.jpg) repeat-x top left
}

header {
background:#F6F5F5 url(../immagini/head.jpg) repeat-x top left
}

#pippo {
height:173px;
width:651px;
background:#F5F6F6 url(../immagini/pippo.jpg) no-repeat top left;
text-indent:-99999px;
margin:0 auto
}

#navigation {
background:transparent url(../immagini/navigation.jpg) no-repeat top center;
height:162px;
margin:0 auto
}

Non capisco cosa sposti in IE di quel pixel il background?

Grazie

SK

**fcaldera** · 21-11-2008, 18:13

lo sfondo sbagliato a quale div appartiene?
e come sono fatti? Puoi postare un link alla pagina?

**serialkiller** · 21-11-2008, 18:26

Originariamente inviato da fcaldera
lo sfondo sbagliato a quale div appartiene?
e come sono fatti? Puoi postare un link alla pagina?

Non è online al momento

Per come sono fatti cosa intendi?

Il pezzo di html che vedi è esattamente quello della pagina.

A mio avviso lo sfondo sbagliato è quello superiore, quello del titolo h1 #pippo, ho provato a dare width:649px a #pippo e così su IE si sistema, ovviemente su FF si sposta.

Se necessario lo carico online e ti passo il link in pvt.

**serialkiller** · 21-11-2008, 19:27

Originariamente inviato da fcaldera
Puoi postare un link alla pagina?

Ok, pvt

**fcaldera** · 21-11-2008, 19:38

Non ho visto il pvt

ma secondo me è solo un problema di arrotondamento di explorer

una immagine è posizionata in un div largo 651px
l'altra in un div larga il 100% tra l'altro posizionate in modo diverso (una a sx l'altra in centro)

quando ridimensioni la finestra semplicemente le immagini possono non combaciare

l'unico modo è avere le due immagini in due contenitori di pari larghezza

**serialkiller** · 21-11-2008, 19:44

Originariamente inviato da fcaldera
Non ho visto il pvt

ma secondo me è solo un problema di arrotondamento di explorer

una immagine è posizionata in un div largo 651px
l'altra in un div larga il 100% tra l'altro posizionate in modo diverso (una a sx l'altra in centro)

quando ridimensioni la finestra semplicemente le immagini possono non combaciare

l'unico modo è avere le due immagini in due contenitori di pari larghezza

Capito..e hai anche ragione

Adesso rivedo il tutto in quest'ottica, in realtà immaginavo qualcosa del genere, ma magari era un altro e nuovissimo bug di IE

invece son io buggato

Grazie
Buona serata

SK

**serialkiller** · 21-11-2008, 20:14

Az, non è cambiato nulla...

Ho messo il div header al 100%, l'immagine di background top center, quello navigation gia lo era, ma nulla, sempre il medesimo problema.

In parole povere adesso ho 2 div il primo #header e subito sotto il secondo #navigation

codice:

<div id="header"></div>

<div id="navigation"></div>

tutti e due al 100% con altezza fissa diversa, ma il problema persiste.
Ho provato anche a togliere il titolo h1 (tanto per provare), non cambia nulla...ho provato a togliere il menu che è dentro a navigation...niente.

**serialkiller** · 21-11-2008, 20:50

Allora, forse ho capito...

e forse tante altre volte non ci ho mai fatto caso e sono impazzito per nulla, sicuramente ho scoperto l'acqua calda, ma, praticamente anche togliendo la dimensione 651px al div o h1 che sia e mettendo tutto al 100% IE sbrocca, e vuole l'immagine divisibile per 2 precisa, quindi anche in un div al 100% con allineamento sull'asse x center l'immagine stessa deve essere di dimensione divisibile per 2.

**thedarkmist** · 24-11-2008, 13:20

Ciao.
Anche io ho problemi simili, addirittura su siti vecchi che fino ad ora andavano bene.
Pare sie un bug di FF3 che ha cambiato modo di effettuare gli arrotondamenti. Non è una questione di larghezza divisibile per 2. Purtroppo il problema si presenta lo stesso.

**serialkiller** · 24-11-2008, 13:33

Originariamente inviato da thedarkmist
Ciao.
Anche io ho problemi simili, addirittura su siti vecchi che fino ad ora andavano bene.
Pare sie un bug di FF3 che ha cambiato modo di effettuare gli arrotondamenti. Non è una questione di larghezza divisibile per 2. Purtroppo il problema si presenta lo stesso.

Nel mio caso è IE e solo IE, che non è capace di fare le divisioni se non per 2.

In FF3 e qualsiasi altro browser il problema non sussiteva ne sussiste.

Sia se il contenitore ha misure tipo 651px, sia se il contentore ha misura al 100% ma il background è di dimensioni 651px.
IE quando calcola il centro (es. top center) flippa e 651px diventano 325px <-> 326px in entrambi i casi, mentre per es. FF qualsiasi sia la dimensione lo mette semplicemente al centro a prescindere dalle dimensioni, se è centro è centro.

Nelle prove avevo messo i due bg delle medesime dimensioni (casualmente misura divisibile per 2), e anche IE si comportava correttamente, siccome una delle due immagini in Bg non mi serviva così grossa, ho provato a farla di 650px, et volià, tutto ok anche su IE, per FF non è cambiato niente, al centro era ed al centro è, per IE invece faceva differenza.

Discussione: Background immagine sfalsata di 1px

Strumenti discussione

Ricerca discussione

Visualizza

Background immagine sfalsata di 1px

Permessi di invio