• P
    User Newbie •

    [Risolto] Layout semplice e crossbrowser.

    Il tempalte che sto usando è apparentemente "elementare":
    (qui un esempio on line: h**p://w ww.fattoriabiologica.com/index2.html)
    ......................
    html,body{margin:0;padding:0}
    div#container {width:780px; margin:0 auto; text-align:left}
    div#header {margin:0; padding: 0; height:80px; line-height:80px}
    div#content {float:left; width:560px}
    div#navigation {margin:0; padding: 0; float:right; width:220px}
    div#extra {margin:0; padding: 0; clear:both; width:100%}
    div#footer {margin:0; padding: 0}
    ..........................
    malgrado questo la pagina si vede a schermo in modo differente con Explorer7, da un lato e Opera e Firefox dall'altro.
    Mi aiutate a correggere la babele tra browsers (che barba!!!).

    0
  • M
    User Attivo •

    Ciao Purno, e benvenuto sul Forum GT :ciauz:
    @purno said:

    malgrado questo la pagina si vede a schermo in modo differente con Explorer7, da un lato e Opera e Firefox dall'altro.
    Mi aiutate a correggere la babele tra browsers (che barba!!!).

    Le differenza che vedo sono relative alle spaziature tra un paragrafo e l'altro, oltre che al margine della pagina (in ie l'header è attaccato al bordo superiore del browser).
    Il mio primo consiglio è quello di usare un foglio di reset, ovvero riderfinire le proprietà dei tag principali (body h1 p etc...) in modo che le proprietà che applichi in seguito ai div, abbiano su tutti i browser "lo stesso punto di partenza". Questo perchè ogni browser (per inciso, in particolare ie) assegna ai tag principali alcune proprietà di default, e naturalmente questi valori possono differire da un browser ad un altro.

    Ti lascio un esempio di foglio di reset (basta che lo copincolli nel foglo di stile PRIMA delle tue proprietà). In rete puoi trovare un sacco di esempi, anche molto complessi.

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
cite,code,em,strong,th{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
th{text-align:left;}
h1,h2,h3,h4{font-size:100%;}
q:before,q:after{content:'';}

    Prova con questo. Se non si sistema, ri-vediamo cosa non funziona.
    Buon Lavoro

    Meryk

    0
  • P
    User Newbie •

    Grazie: funziona. Gli spazi tra i vari div ora sono uguali.

    0
  • M
    User Attivo •

    Bene! Segnalo come risolto! 🙂

    0
Effettua l'accesso per rispondere