Pixel in + su IE

[Pierhagi]

Ciao a tutti

sto sbattendo la testa su una cosa apparentemente semplicissima ma a quanto pare non è così.

La pagina sulla quale sto lavorando è:

http://www.pixelgraphic.it/home.asp

si 2 differenze tra IE e Firefox o Opera.

La prima sono quei 2 pixel che non allineano la colonna rossa con quella verde su IE mentre in Firefox e Opera l'allineamento è corretto.

La seconda differenza è che in IE la parte verde è "attaccata" correttamente al footer mentre negli altri 2 browser queste 2 parti sono staccate.

E' possibile correggere queste due differenze?

Ho validato il CSS ed è perfettamente a norma.

Potete aiutarmi?

Il mio foglio di stile è questo:
************************************************** *************
/*stili per il layout fisso con posizionamenti assoluti*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{position:relative; width:800px; margin: 0 auto;text-align: left;border-left: 1px solid #36c;border-right: 1px solid #36c; border-bottom: 1px solid #36c;}
/*stili generici, su header e footer*/
div#header{ margin:0px 0px -90px 0px;}
div#footer a{color: #fffff0;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
/*div#navigation{position:absolute;top: 80px;right: 0;width: px; border: 5px;}*/
div#content{padding:0px 0px 0px 0px;background-color: #fff}
div#contenuti{ position:relative; z-index:2; width:600px; margin: 10px 0px 0px 170px;background-color: #00CC33}
div#extra{position:relative; width:160px;\width:170px;w\idth:170px; height:80px;
top:92px;right:-20px;left:0px;background-color:#FF0000; z-index:2}
div#extra div.newsbox{font-size: 90%;margin-bottom: 0px;}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
div#footer{z-index:2; position:relative;text-align:center; padding: 0px 0px 0px 0px;background-color: #69c; color: #000}
************************************************** *************
Pierhagi

[fcaldera]

magari non risolve, ma almeno ti (mi) togli un dubbio

elimina qualsiasi cosa prima del doctype, potrebbe mandare la pagina in quirks mode.
Al momento c'è un doctype commentato, per sicurezza toglilo.

[Pierhagi]

Ciao ho tolto il doctype ma non cambia nulla.

Ho provato anche ad eliminare la stringa asp che il doctype ma ottengo lo stesso risultato.

[fcaldera]

no, il doctype lascialo. (io parlavo solo di ciò che si trovava in cima ad esso)
se non risolvi per domani guarderò con explorer 6, al momento l'emulatore per linux non mi carica la pagina.

[Pierhagi]

Ciao

ho fatto altre prove con pc e browser differenti avendo i risultati + disparati!!!

L'unico browser che non mi da problemi è Firefox!

Addirittura con Opera in un pc va bene e con l'altro no. Lo stesso con IE.

Con sicurezza posso dirti che IE6 mi da lo scalino e il footer è attaccata alla parte verde!

Se hai altre idee sono qui!

[fcaldera]

il problema dipende dal fatto che, sebbene tu sia convinto del contrario ("Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni rispetto all' analogo con i float"...), i posizionamenti assoluti relativi sono in realtà molto più problematici dei float

nel tuo caso hai mischiato misure percentuali con posizionamenti in pixel e non hai tenuto conto che di base explorer ha un basefont di 16px (gli altri browser lo hanno di norma a 12px) nè che i browser possono interpretare padding e margini (superiori ed inferiori) in modo diverso (vedi immagine allegata)

La parte in alto con l'header fatto in flash ha pari altezza sia su IE che su FF

Sinceramente piuttosto che perdere tempo a risolvere con hack vari rifarei la parte relativa al container usando i float (che a mio modesto parere ti avrebbero facilitato il lavoro)

Non ho capito cosa intendi quando scrivi che il posizionamento assoluto darebbe più chance di faciltare il posionamento del sito, ma per quanto riguarda il problema delle colonne con i float esiste una tecnica chiamata faux columns che aggira la differenza di altezza tra le colonne

[Pierhagi]

Ciao fcaldera

ti ringrazio per i chiarimenti utilizzerò il CSS x le false colonne.

A questo, utilizzando le false colonne, mi sorge spontanea un'altra domanda:

i layout a 2 o 3 colonne, rispetto al layout a False Colonne, sono oramai superati?

Prendiamo il mio caso:

http://www.pixelgraphic.it/home.asp

...se dovessi creare altri siti di questo gengere a 2 colonne utilizzerei sempre il layout con False colonne? .... e se le colonne fossero 3?

So chi mi mancano un pò di nozioni e non vorrei aprire un dibattito ma cortesemente potresti provare a chiarirmi questo questito?

Grazie dell'aiuto

Pier

[lila89]

la differenza tra i vari browser è ormani nota, cmq si riescono ad eliminare i difetti riguardanti i margini e il padding che sono oggetto di discrepanza tra i browser; ci sono 3 metodi:

1) nel css devi specificare tutti e 4 i margini di ongi cosa, non basta specificare per esempio solo margin-top:5px; , ma devi mettere tutti e 4 i margini con gli altri settati a 0 se non deve esserrci nessuno spazio;

2) crei il css che bene sia su IE che su FF e dove qst lascia spazi diversi (come nel tuo caso) inserisci la clausola !important, qst viene letta solo da FF e altri browser simili ma no da IE, per cui se setti

margin-top:15px !important;
margin-top:20px;

per FF e altri browser il margin-top risulta essere 15 mentre per IE 20;

3) crei due CSS uno per FF e uno per IE e con semplice script in javascript applichi uno o l'altro a seconda del tipo di browser con cui viene aperta la pagina
http://forum.html.it/forum/showthrea...readid=1289452