Margin, paddin o altro? Rendering anomalo in IE 5.5 e 6

**samiel** · 25-10-2007, 21:52

Questa una sezione (spero bastante per individuare il problema) di un CSS:

codice:

/*stili per il layout elastico con background*/
html{margin:0; padding:0;}
body{padding:10px; font-family:verdana,arial,sans-serif; font-size:76%; color:#1A2894; background-color:#17237A;}

/*stili generici, su header e footer*/
div#header{height:auto; background-color:white; color:#1A2894;}
div#footer{height:60px; padding:45px 35px; clear:both; background-color:white; color:#1A2894; border-top:thick double #17237A}

/*stili specifici per il layout*/
div#container{width:96%; border:0; margin:auto; background-color:white;}
div#wrapper{width:98%; border:0; margin:auto; background-color:white}
div#content{width:auto; margin-left:160px; padding:10px; background-color:#F4F4F4; overflow:visible;}
div#nav_left{height:auto; width:120px; float:left; padding:25px 15px; background-color:white;}
div#nav_right{height:auto; width: 210px; float:right; padding:25px 15px; background-color:white;}

IE 5.5 e 6 me spostano più in alto a sinistra, e i due loghi sfondano lo header verso l'alto.
Io lavoro (cioè sto cercando di imparare) con l'accoppiata Quanta Plus/Firefox, e su qyest'ultimo
invece la resa è corrispondente alle mie intenzioni
Ho postato qui la pagina per prova:
http://samiel.netsons.org/index.html
Si tratta del problema del box model di IE (che non ho studiato)?
Quale tipo di hack dovrei adottare? Anche qualche link che c'entri il mio problema
sarà graditissimo

Grazie
M.

**samiel** · 25-10-2007, 22:19

Ho fatto una prova con browsershot, e c'è da deprimersi per un bel po'...
Opera centra la schermata, ma mi mette i loghi troppo in altro,
Firefox 1.5 li mette troppo in basso. IE 5.5 e 6 scentrano tutto
(vedi post precedente) e infine in IE 7 (risultato che mi dà anche
IENetRender) produce una schermata vuota tutta blu.
Che sfacelo... Oltre a darmi all'ippica, ho qualche via d'uscita?

M.

**Mich_** · 26-10-2007, 08:59

Dalla descrizione e da quel poco che sono risucito a capire dal codice, ti posso dare alcune indicazioni:
1. cerca di evitare il padding e il border: hanno un comportamento diverso in IE (quirks mode).
Ad esempio il padding del <body> puoi forse sostituirlo con un margin del #container.

2. Ometti il prologo XML: per XHTML 1.0 non e` obbligatorio e in IE6 impedisce l'interpretazione del DOCTYPE

3. Controlla il codice con un validatore: qualcuno dei difetti di cui parli potrebbe essere dovuto ad un errore di sintassi nel codice HTML o CSS (e non fidarti troppo di browsershot o siti analoghi: eventualmente provane altri, se non hai accesso a macchine con i browser originali)

Per il resto mi pare una pagina ben fatta, con una grafica pulita ed essenziale.
Io con FF 1.5 sotto linux la vedo molto bene.

**samiel** · 26-10-2007, 20:19

Grazie per il giudizio, lo prendo come un incoraggiamento dal momento
che all'inizio di settembre dell'HTML sapevo solo che esisteva, e dei CSS
neppure quello... Ma sto cercando di imparare!

Quanto alle tue indicazioni, visto che a volte voi esperti siete un tantino
troppo "sintetici" e non è poi chiaro al neofita che cosa in concreto va fatto:
1. intendi dire di non usarli in combinata? O in generale?
Se pongo in #container in margine diverso da "0 auto" mi sballa
i margini, non regola quelli interni a #content...
Cmq ho risolto il problema della centratura su IE 5-5. 6 e 7.
2. Obbedisco! Tolto.
3. Lo faccio sempre con quello del W3C. Sia il CSS,
sia le pagine HTML (1.0 strict) sono valide.

FOrse c'è un problema relativo alla definizione dello schermo,
ma devo verificare. Un'ultimo quesito, visto che in alcuni libri
che ho letto si discute sulla faccenda. Se messo le misure in em
anziché in pixel, ottengo sensibili vantaggi?

Molte grazie
M.

**Mich_** · 29-10-2007, 10:20

Originariamente inviato da samiel
Grazie per il giudizio, lo prendo come un incoraggiamento dal momento
che all'inizio di settembre dell'HTML sapevo solo che esisteva, e dei CSS
neppure quello... Ma sto cercando di imparare!

Quanto alle tue indicazioni, visto che a volte voi esperti siete un tantino
troppo "sintetici"

...ehmm

Purtroppo e` vero: credo sia un difetto comune. Chiaramente siete autorizzati a chiedere piu` dettagli.

1. intendi dire di non usarli in combinata? O in generale?

In generale. Trovi spiegazioni nei tutorial CSS alla voce "box model". Tanto per continuare ad essere sitetico:
La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Se pongo in #container in margine diverso da "0 auto" mi sballa
i margini, non regola quelli interni a #content...

Non mi torna: sospetto un altro errore.

3. Lo faccio sempre con quello del W3C. Sia il CSS,
sia le pagine HTML (1.0 strict) sono valide.

FOrse c'è un problema relativo alla definizione dello schermo,
ma devo verificare. Un'ultimo quesito, visto che in alcuni libri
che ho letto si discute sulla faccenda. Se messo le misure in em
anziché in pixel, ottengo sensibili vantaggi?

Dipende ...
Se hai una pagina fatta tutta di immagini, non conviene.
Se invece devi formattare del testo, puo` essere (molto) utile, ma le condizioni possono essere diverse.
Recentemente ho visto questi due articoli, che ti possono aiutare a comprendere meglio (anche alcuni link ivi contenuti possono essere interessanti):
Layout elastico a due colonne
Layout liquido a due colonne

**samiel** · 29-10-2007, 23:40

credo sia un difetto comune

Sarà che insegno da 20 anni, ma ho imparato a non dare nulla per scontato.
Ho scritto una guida per Slackware ("Slackware 4 dummies") che è stata apprezzata
proprio per il carattere "didattico". Poi, al di là delle lettura, è l'esercizio,
il provare e riprovare comprendendo gli errori che ti rende capace.
E vedo che nell'ambito dei CSS ci vuole tecnica e gusto...

Trovi spiegazioni nei tutorial CSS alla voce "box model".

Difficile farne a meno...

sospetto un altro errore

Domani rivedo con calma. Il fatto è che sto provando a costruire
questo sito con varie tecniche (elastico, elastico con le colonne laterali fisse)
e ogni tanto perdo l'orientamento.

Se invece devi formattare del testo, puo` essere (molto) utile

Il sito con cui ho a che fare contiene pochissime immagini
ed è costituito quasi per intero da testo. SOlo che i miei tentativi
danno esiti corretti a risoluzioni elevate (1280x1024), me se poi
si vedono con risoluzioni più basse certi elementi si spostano
dove non dovrebbero. Cmq mi serve qualche altro giorno per riprovare
(visto che non faccio CSS tutto il giorno...)

Intanto molte grazie
M.

Discussione: Margin, paddin o altro? Rendering anomalo in IE 5.5 e 6

Strumenti discussione

Ricerca discussione

Visualizza

Margin, paddin o altro? Rendering anomalo in IE 5.5 e 6

Permessi di invio