Header spostato con explorer 7.0.5730.11?

mercoledì 11 luglio 2007 - 13.30

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: mer 11 lug 2007 - 13:30

Ciao a tutti.
Non mi riesce di risolvere un problema che ho con il mio sito: un problema suppongo di compatibilità css con Internet Explorer.
Quando lo visualizzo con la versione 7.0.5730.11 (che non ho ma hanno due miei amici e ad entrambi fa quel giochetto..), l'header viene leggermente spostato a destra di 1 pixel.
Con gli altri explorer che ho provato, non da problemi.
A cosa è dovuto?
Il sito è questo:
http://www.ghisirds.it/

Grazie a tutti
Marco

__________________
http://www.idee-regalo.biz/ - http://www.giftideashop.net/

koolmind Profilo | Junior Member

78 messaggi | Data Invio: mer 11 lug 2007 - 20:27

Il problema sta sicuramente nei CSS... dovresti postare la porzione di codice che riguarda le sezioni HEADER, CONTAINER e la sezione del contenuto (in pratica... se mi passi tutto il CSS facciamo prima! tanto non te lo rubo! fidati...)

IE7 ha spesso problemi sull'interpretazione del box model, anche se il più delle volte riguardano le altezze e non le larghezze.

Una dritta al volo, nella speranza di risolvere è quella di creare 3 regole distinte per IE6, IE7 e Mozilla:

div.header{ /* IE 7 */ }

html>/**/body div.header{ /* tutti ma non IE7 */}

* html div.header {/* IE6 se serve */}

Rimango a disposizione

-----------------------------------------------------------------
koolmind
Dice il saggio: Non ci sono domande difficili, solo risposte che non conosciamo.

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: gio 12 lug 2007 - 15:03

eccolo qui il pezzo inquisito:

body {
margin: 0;
padding: 0;
background-color: #000000;
background-position: center;
background-repeat: repeat-y;
background-image: url(../backround.jpg);
text-align: center;
}

#container {
width: 760px;
margin: auto;
text-align: left;
}

#corpo {
width: 760px;
float: left;
display: inline;
}

#content {
float: left;
display: inline;
width: 530px;
background: transparent;
color: #000;
}

#header a{
position:relative;
display: block;
width: 760px;
height: 100px; /* l'altezza serve a FF altrimenti abbassa la barra di intestazione, per IE e indifferente */
}

#header a span{
position: absolute;
width: 100%;
height: 100%;
background: url(../header.jpg);
cursor: pointer /*regola per IE*/;
}

http://scuo.la/ - http://www.idee-regalo.biz/ - http://www.ghisirds.it/ - http://www.geometri-reggio-emilia.it/

koolmind Profilo | Junior Member

78 messaggi | Data Invio: gio 12 lug 2007 - 19:59

Allora... vediamo se ho capito bene...

La tua pagina è fatta di uno sfondo marrone con un contenitore tipo colonna bianco coi bordi verdi. In cima a questa colonna tu metti uno span che ha come sfondo il logo di intestazione e il bordo superiore curvo che chiude la sezione bianca... giusto?

In tal caso proverei a posizionare il background di quest'ultimo in questo modo:

- FIREFOX -

#header a span{
position: absolute;
width: 100%;
height: 100%;
background: url(../header.jpg);
}

- IE -
* html #header a span{
position: absolute;
width: 100%;
height: 100%;
background: url(../header.jpg) 10px 0; /* questa regola sposta l'origine dello sfondo solo per IE. Il valore 10px è a caso... sceglilo tu */
cursor: pointer /*regola per IE*/;
}

Non potendo provare non so quanto funzioni... ma mi pare sia un'idea abbastanza plausibile.
Prova poi ne riparliamo.

-----------------------------------------------------------------
koolmind
Dice il saggio: Non ci sono domande difficili, solo risposte che non conosciamo.

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: mer 18 lug 2007 - 10:09

no, non va bene perchè il problema non è nell'header.
Se con firefox provi a restringere la finestra, vedi che quando arriva ad essere grande come il corpo, questo si sposta a sinistra.
Però è dovuto al body, è lui che si sposta leggermente... adesso provo a scorporarlo!!
http://scuo.la/ - http://www.idee-regalo.biz/ - http://www.ghisirds.it/ - http://www.geometri-reggio-emilia.it/

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: mer 18 lug 2007 - 11:07

Risolto!
Praticamente si è trattato si scomporre l'immagine del body da quella del container.
Se metto una immagine di 1600pixel nel body, con dei richiami visivi verticali, questa si sposta leggermente quindi nel corpo del sito si vede.
Allora ho creato un'altra immagine di 760 pixel che ho messo nel container davanti appunto al body.
Il body è diventato uniforme e continua a spostarsi, ma essendo appunto uniforme non si vede.
Grazie a tutti per l'aiuto.
http://scuo.la/ - http://www.idee-regalo.biz/ - http://www.ghisirds.it/ - http://www.geometri-reggio-emilia.it/

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !