Visualizzazione errata iE

**Evoken** · 15-01-2011, 13:45

Siamo alle solite, con Opera - Firefox - gChrome che leggono il mio operato a meraviglia, e con quel analfabeta di internetExplorer che non capisce niente!

Ho creato un sito, tableless, con css e div!
Per ora è solo uno scheletro, perchè prima appunto devo ovviare a questo problema!

E' un semplice sito con allineamento centrale!
Ho un div contenitore che racchiude un div di top, uno per il menu, 2 div allineati di fianco come contenuto del sito (lato e corpo), e un div baseline come coda del sito!

Per farvi capire meglio com'è basato, vi linko un immagine (screencap da Opera)!

Come potete vedere l'allineamento è perfetto, non c'è una sbavatura!

Ecco invece cosa accade quando lo visualizzo con iE:

Come potete notare anche dall'ingrandimento dell'immagine, per un paio di pixel il contenuto è spostato verso sinistra, lasciando scoperta parte dello sfondo!

Ho smanettato a lungo senza risolvere il problema!
Come potrei fare affinchè l'allineamento in iE sia perfetto come quello in Opera?
Vi linko i codici html e css, sperando che qualcuno possa aiutarmi

codice:

<body>
<div id="container">
  <div id="top"></div>
  <div id="menu"></div>
  <div id="lato"></div>
  <div id="corpo"></div>
  <div id="baseline">
    <p class="basefont"></p>
  </div>
</div>
</body>

codice:

html, body {
background-color:#600000;
background-image:url(img/sfondo.jpg);
background-position:top;
background-position:center;
background-attachment:fixed;
background-repeat:repeat-y;
margin: 0px;
height:100%;
width:100%;	} 

#container {
width:800px;
height:100%;
min-height:900px;
position:relative;
margin-left:auto;
margin-right:auto;    } 

#top {
width:800px;
height:250px;
background-color:#900;
position:relative; 	}      

#menu {
width:800px;
height:50px;
background-color:#009;
position:relative;	}      

#lato {
width:200px;
height:300px;
position:relative;
float:left;
background-color:#9C0; }  				  				  

#corpo {
width:600px;
height:300px;
position:relative;
background-color:#F6F;
float:right;	}

#baseline {
width:800px;
height:100px;
position:absolute;
left:50%;
margin-left:-400px;
bottom:0;
vertical-align:top;
background-color:#600000;
background-position:top;
background-repeat:repeat-x;	 }

**Evoken** · 15-01-2011, 15:45

Nessuno può aiutarmi? Non voglio essere seccante, ma ho una certa urgenza a terminare questo sito, e vorrei che sia portabile con tutti i browser!

**Jekkil** · 15-01-2011, 23:54

prova a mettere padding: 0px a html, body!

Una domanda: perchè tutti gli elementi hanno la proprietà position:relative?

**Evoken** · 23-01-2011, 19:00

Dunque, innanzi tutto mi scuso per il ritardo con cui rispondo!
E ringrazio vivamente per l'aiuto, ma ho risolto (con dei trucchetti)!

Per rispondere in merito al posizionamento relativo, ho optato per questa scelta semplicemente perchè se metto absolute i div mi si sfasano rispetto a ciò che voglio realizzare!

Soltanto il div baseline mi interessa tenere absolute perchè deve "galleggiare" sempre in basso rispetto alla risoluzione del browser!

Potete mettere risolto (anche se una soluzione in merito a questo problema di iE non è stata ancora trovata)

Discussione: Visualizzazione errata iE

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione errata iE

Permessi di invio