Il mio layout è sballato

Provate a vedere questa pagina che sto realizzando per il restyling al mio sito: http://dementialsite.altervista.org/site4/index.htm (i file richiesti dovrebbero esserci tutti).

Il problema è questo: con IE e Opera si vede esattamente come ho progettato, con Firefox e Netscape, invece, i due DIV laterali "sbordano" all'interno della sezione principale. Credo che la magagna si nasconda in questa parte di stile (il codice completo è a disposizione al link sopra):

Codice:

---

/* posizionamento delle sezioni */
DIV#header { width:auto }
DIV#news { float:left; width:20% }
DIV#menu { width:auto; margin-left:20% }
DIV#extra { float:right; width:25% }
DIV#main { margin-left:20%; margin-right:25%; width:auto }
DIV#banner { clear:left; margin-right:25%; width:auto }
DIV#footer { clear:both; width:auto }

---

Mi potreste aiutare a risolvere il problema?

Altra cosa: come mai con IE (e solo con IE) la parte superiore (quella con il banner grande) che dovrebbe essere più scura ha invece lo stesso colore di quelle laterali, almeno fino a quando non scorro la pagina in giù e poi torno su...?

Grazie a chi risponde... statemi bene...

i width non metterli con % ma con i px.

Il problema sta nei margini, ie li considera erratamente all'interno del div, quindi l'errore sta in ie e non in mozilla/firefox (strano vero?)

Un ulteriore approfondimento lo puoi trovare qui:

http://tantek.com/CSS/Examples/boxmodelhack.html

bye,
Marco

Ho guardato la pagina, ma non mi è molto chiaro come dovrei fare per risolvere il problema... è quell'attributo voice-family?

Citazione:

---

Originalmente inviato da silverseraph

i width non metterli con % ma con i px.

---

Sarebbe un'idea da non scartare, ma vorrei evitare che in situazioni non estreme chi aprisse il sito dovesse spostare la pagina per leggerla...

Statemi bene...

Ecco come ho risolto il problema, in modo un po' rocambolesco visto che della pagina fornita non ho capito una mazza...

1. Ho impostato tutti i DIV con stile

Codice:

---

DIV { margin:0; padding:0 }

---

così vengono inseriti correttamente, anche se con i contenuti "collassati".

2. Ho inserito i contenuti delle varie sezioni all'interno di un ulteriore DIV

Codice HTML:

---

<DIV ID="..."><DIV CLASS="contents">...</DIV></DIV>

---

quello che sembra il padding orizzontale è regolato per metà dallo stile

Codice:

---

DIV.contents { margin:0.5em; padding:0 }

---

3. "L'altra metà" del padding è impostata con lo stile

Codice:

---

DIV DIV { padding:0.5em 0 }

---

Ecco, non so come ho fatto ma sono riuscito a fare il template di base... adesso preparerò le home delle varie sezioni e poi chiederò opinioni sulla grafica (non qui, ma in "pubblicità").

Statemi bene...