Explorer mi visualizza male un padding perfetto su Firefox

**Gas75** · 05-11-2012, 16:06

Salve,
non riesco a venire a capo di un piccolo problema.
Ho realizzato un foglio di stile per la pagina-tipo di un sito, con Firefox la vedo perfettamente, mentre con Explorer, dal momento in cui ho inserito un padding, si è guastato tutto!

Questo è il foglio di stile completo.

codice:

html, body { margin-top: 10px; padding: 0; }
body { font: Arial, Helvetica; background-color: #408080; color: #ffffff; text-align: center; }
p, table { color: #ffffff; font-family: Arial, Helvetica; font-size: 10px; }
input { font-family: Arial, Helvetica; font-size: 10px; }
a:link { color: #ff00ff; text-decoration: none; font-weight: bold }
a:visited { color: #ff00ff; text-decoration: none; font-weight: bold }
a:active { color: #ff0000; text-decoration: none; font-weight: bold }
a:hover { color: #ff0000; text-decoration: underline; font-weight: bold }
div#container { width: 980px; margin: 0 auto; text-align: left; }
div#header { margin: auto; height: 64px; background-color: #000000; text-align: center; }
div#titolo { margin: auto; height: 48px; background-color: #000000; text-align: center; }
div#spot { float: left; margin: auto; width: 700px; height: 70px; background-color: #000000; text-align: center; }
div#menu { float: left; width: 140px; height: 670px; text-align: center; line-height: 2,5; background-color: #000000; }
div#main { float: left; padding: 5px; width: 690px; height: 590px; background-color: #000000; font-family: Arial, Helvetica; font-size: 13px; text-align: justify; overflow: auto; }
div#destro { float: right; width: 140px; height: 670px; text-align: center; line-height: 2,5; background: #000000; }
div#footer { clear: both; width: 980px; margin: 0 auto; background-color: #000000; text-align: center; font-family: Arial, Helvetica; font-size: 16px; }
div.albi { font-family: Arial, Helvetica; font-size: 13px; color: #ff8800; font-weight: bold; text-align: justify; }

Il padding è nel div main, e questo è quello che vedo con Explorer, con quelle parti di sfondo pagina che si insinuano tra i div non più affiancati...

Se cerco di correggere le larghezze, ottengo su Firefox la perdita di tutto l'ordine esistente, perché il div main se ne va a capo in quanto non ha abbastanza spazio...
Come posso fare per ottimizzare la visualizzazione?

**Mich_** · 05-11-2012, 16:37

Non metti la DTD usata dalla pagina, per cui non sono sicuro che sia questo il problema.

IE interpreta in modo (quasi) standard se usi una DTD strict, intepreta in modo retrocompatibile (quirks) se la DTD e` di tipo transitional.
Nel modo quirks, border e padding fanno parte di width/height; nel modo standard sono esterni a tali misure.

Prova a cambiare la DTD (linea del DOCTYPE).

**Gas75** · 05-11-2012, 17:33

Questi sono i dati nell'intestazione del codice della pagina...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Mi suggerisci cortesemente quale DTD dovrei usare?

**Mich_** · 05-11-2012, 18:00

La DTD che io preferisco e` la XHTML 1.0 Strict, che e` quella che fa funzionare meglio anche IE6 (vedi quali sono i browser usati dal tuo target di utenti).
Pero` adesso si puo` usare anche quella di HTML5.

Pero` se usi una DTD strict, devi anche adattare la sintassi (verifica con i validatori - tra i "link utili" ci sono i riferimenti). Forse il passaggio da HTML 4 transitional a XHTML 1.0 e` un po' troppo lungo (potresti dover apportare molti cambiamenti), per cui potrebbe essere piu` semplice passare a HTML 4 Strict.

**Gas75** · 05-11-2012, 18:37

Uhm, ci stiamo inoltrando in una foresta per me un po' troppo fitta...

Io i cambiamenti li sto già apportando, visto che il sito che sto rifacendo è parecchio diverso dal precedente... però vorrei che questa nuova versione, che credevo di aver definito in sede di fogli di stile e quindi stavo riempiendo i vari div con i testi del sito vecchio, rimanga come la sto facendo dal punto di vista dell'aspetto grafico.

A me serve un DTD che, sostituito a quello attuale, mandi a posto quel padding su Explorer, senza però causare altri problemi... Il foglio di stile l'ho già pubblicato, e non mi pare ci siano poi cose troppo trascendenti.

Purtroppo non so che browser usano i visitatori del mio sito, solamente la nazione di provenienza.

**Mich_** · 06-11-2012, 11:28

Allora prescindiamo dal target: e` una cosa importante, che dovrai affrontare prima o poi, ma che esula dal probelma specifico (e che comunque non e` essenziale e puoi rimandare).

Resta il problema di fare pagine che si vedano been nel maggior numero di browser.
Sicuramente passare ad una DTD Strict e` una cosa che aiuta (specie per i problemi con IE).

Pero` Strict vuol dire che la sintassi va fatta correttamente, altrimenti il problema lo risolvi per IE ma ti si ripresenta simmetrico per i browser piu` corretti.
Quindi i passi da compiere sono:
1. cambaire la DTD (vedi il tuo manuale HTML alla voce DOCTYPE per la sintassi corretta della linea della DTD)
2. verificare con i validatori se ci sono errori di sintassi nel codice HTML e CSS;
3. correggere e ciclare tra i punti 2 e 3 finche` non ci sono piu` errori
(tieni presente che alcuni errori che sembrano banali generano un numero imprecisato di righe di errore, per cui conviene correggere un po' alla volta).

**Gas75** · 06-11-2012, 12:47

Credo di avere risolto in maniera molto spartana ma efficace: non avevo definito uno sfondo al div container, per cui prendeva quello del "genitore", il body!

Ora ho il div main che resta un po' più stretto su Explorer rispetto a Firefox (di quei 5+5 px), ma è un compromesso che mi va bene, piuttosto di dovermi fermare a leggere intere lezioni sui fogli di stile.

Vedrò comunque con calma la questione dei DTD.

Grazie dell'assistenza.

Discussione: Explorer mi visualizza male un padding perfetto su Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Explorer mi visualizza male un padding perfetto su Firefox

Permessi di invio