Explorer 5.5 e intestazione in css non centrata

lunedì 29 ottobre 2007 - 19.39

ghisirds Profilo | Junior Member

Salve,
non riesco a capire perchè l'intestazione appare spostata con Explorer 5.5.

La struttura html è questa:

<div id="container">
<div id="header">
</div>
<div id="corpo">
<div id="content">
</div>
<div id="menu">
</div>
</div>
</div>
<div id="footer">
</div>

e questo è il CSS:

body {
margin: 0;
padding: 0;
text-align: center;
background: #FF0000 url(../immagine.jpg) repeat-x center bottom;
}

#container {
width: 800px;
margin: auto;
background-position: center;
background-repeat: repeat-y;
background-image: url(../immagine.jpg);
text-align: left;
}

#header {
position:relative;
display: block;
width: 800px;
height: 223px;
background: url(../immagine.jpg);
}

#corpo {
width: 800px;
float: right;
display: inline;
}

#content {
float: right;
display: inline;
width: 550px;
background: transparent url(../immagine.jpg) no-repeat;
color: #000;
}

#menu {
float: right;
display: inline;
width: 180px;
background: transparent;
color: #000;
font: italic bold 13px Georgia, "Times New Roman", Times, serif;
margin-right: 15px;
letter-spacing: -2.5px;
word-spacing: 2px;
}

#footer{
height: 210px;
background-image: url(../immagine.jpg);
clear: both;
}

Ho provato anche a mettere l'header in un float sperando che fosse un problema dei doppi apici, ma in realtà non è cambiato niente:

#header {
float: right;
display: inline;
width: 800px;
height: 223px;
background: url(../immagine.jpg);
}

Il problema non si presenta con Firefox, Explorer 6 e 7, ma invece si con Explorer 5.5.
In pratica l'header viene viene allineato a sinistra invece che al centro.
Che modifiche vuole nel css questo browser marcio? Come risolvere?
Grazie mille

__________________
http://www.idee-regalo.biz/ - http://www.ideaforgift.co.uk/

gene_old Profilo | Junior Member

Ciao!
prova risolverlo così:

body
{
margin:0 auto;
padding:0;
text-align:center;
background: #FF0000 url(../immagine.jpg) repeat-x center bottom;
}
#container
{
width:800px;
margin:0 auto;
background: #FF0000 url(../immagine.jpg) repeat-y center center;
text-align: left;
border:solid 1px #000;
}
#header
{
margin:0 auto;
width:800px;
height:223px;
background: url(../immagine.jpg);
border:solid 1px #000;
}
#corpo
{
margin:0 auto;
width: 800px;
border:solid 1px #000;
}
#menu
{
float:left;
margin-left:10px;
width: 180px;
background: transparent;
color: #000;
font: italic bold 13px Georgia, "Times New Roman", Times, serif;
letter-spacing: -2.5px;
word-spacing: 2px;
border:solid 1px #000;
}
#content
{
float:right;
width: 550px;
background: transparent url(../immagine.jpg) no-repeat;
color: #000;
border:solid 1px #000;
}
#footer
{
margin:0 auto;
height: 210px;
background-image: url(../immagine.jpg);
clear: both;
border:solid 1px #000;
}

Purtroppo nn ho installato IE 5.5 ma in teoria nn dovrebbe darti dei problemi, secondo il problema di prima è dovuto al fatto
che hai utilizzato molti float:right anche dove nn servivano.
Se ho capito bene tu dentro al container hai tre elementi che devono stare centrati nella pagina, e uno di questi ovvero "corpo" contiene altri 2 elementi che devono stare uno fianco all'altro. Il float serve solo per questi 2 elementi, mentre per gli altri basta un
margin:0 auto per tenerli centrati.
Spero di averti risolto il problema, nel caso contrario "proviamo" diversamente.

Ciao!!

ghisirds Profilo | Junior Member

niente da fare, ho provato a cambiare ogni singolo parametro ma l'header rimane dov'è!
E' più difficile del previsto mi sa...!

gene_old Profilo | Junior Member

Prova levare il text align:left nel container e nell'header mettere text align:center....

ghisirds Profilo | Junior Member

niente da fare neanche così.
E' il mistero del millennio, questo!

gene_old Profilo | Junior Member

Una soluzione ci deve essere per forza, anche perchè quello che si vuole fare è un'operazione abbastanza elementare anche per un browser datato come IE 5.5.
Nn avendolo installato purtroppo nn riesco a vedere come reagisce. Come ultima soluzione opterei per una centratura manuale degli elementi giocando di margin o di padding.
Se ti posso dare un consiglio, io in genere quando creo una pagina web, testo il codice con diversi browser: IE6, IE7, Firefox, Netscape e Opera, ma difficilmente con IE5.5, sono il primo a dire che un sito deve essere compatibile con tutti i browser e accessibile a tutti indistintamente, ma purtroppo alcuni browser (soprattutto quelli datati) hanno dei bug impressionanti difficili a volte da aggirare.
Prova fino all'ultimo e se persiste il problema considera che IE5.5 sta cadendo piano piano in disuso.
Cmq se risolvi il problema fammi sapere che sono curioso...ciao!

ghisirds Profilo | Junior Member

guarda, se può aiutare, il sito è questo:
http://www.knightsofmalta.it/

o vedi l'errore inserendo il link qui:
http://ipinfo.info/netrenderer/

ciao e grazie

gene_old Profilo | Junior Member

Riesci a mandarmi il codice completo?
Appena riesco, provo ad installare una virtual machine e vedere come reagisce IE 5.5.
ok?
ciao

ghisirds Profilo | Junior Member

Non ce n'è bisogno:alla fine ho risolto!
Praticamente nel codice html c'era una tabella con le dimensioni impostate in percentuale: width=100%.
E' bastato quindi esprimere questa misura in pixel scrivendo width="600" e viene così digerito bene anche da Explorer 5.5.
Grazie a tutti

gene_old Profilo | Junior Member

bene, la reputazione di IE 5.5 è ancora salva
Ciao!
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 !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5