layout diverso da firefox a ie

[Van Basten 7]

salve a tutti,
ho strutturato il mio sito con un css che determina il layout e altre cosette

tutto bene se uso firefox layout e colori fedeli al css ma con ie...

il layout è simile a quello di html.it cioè il contenuto è tutto in un div container centrale e ai lati c'è lo sfondo del body.
con ie vedo il div container spostarsi tutto a sinistra e il colori impostati per i link non funzionano ma restano i tradizionali blu e viola

vi allego il codice del css

html,body{margin:0;padding:0 }
body{font: 100.01% "futura md",Arial,helvetica,verdana;
   background: #000000;color: white;text-align:justify;background: url(images/fiocco2.jpg)}
h1{margin: 0;padding:2%;font-size: 100%;color: #FF744C}
h2,h3,h4{margin:0;padding-left: 5px;line-height: 30px;color: white}
h2{font: 100.01% "futura md",Arial,helvetica,verdana;padding: 1%}
h3{font: 100.01% "futura md",Arial,helvetica,verdana;padding: 1%}
h4{font: 100.01% "futura md",Arial,helvetica,verdana}
p{margin: 0 5px;padding: 0 0 0.7em}
div#container{width:85%;margin: 0 auto;
    background-image: url(images/0600.jpg);text-align:justify;border-left: 2px solid red;border-right: 2px solid red}
div#header{background: #000000;text-align:center;border-bottom: 1px solid red}
div#main{float:left;width:100%;}
div#content{float:right;width:74%;border-left: 1px solid red; background-image: url(images/0600.jpg)}
div#nav{float:left;width:25%;font-size:85%;background-image: url(images/0600.jpg);text-align:center}

div#footer{clear:both;width:100%;border-top: 1px solid red;padding-top:10px;padding-bottom:10px;background: #000000}



ul{margin: 1em 1em 1em 1em;padding: 0; list-style-type: none;}
li{margin: 0;padding: 0}
A:LINK    {text-decoration: none; color: white}
A:VISITED {text-decoration: none; Color: #87CEEB}
A:HOVER   {Color: red}

se vi puo' servire richiamo il css attraverso il codice

<style>
@import url(stilepagina.css);
</style>

[Mich_]

Anzitutto non e` facile seguire quel codice: una buona formattazione e` essenziale per evitare errori.

Comunque ci sono errori di sintassi (maiuscole/minuscole), che in IE vengono ignorati.
Inoltre fai ampio uso di padding, che in IE vengono interpretati secondo un box-model diverso dallo standard.

Possibili rimedi:
1. Fare un giro dai validatori (che trovano alcuni tipi di errore meglio degli umani)
2. Passare a XHTML Strict (con cui anche IE6 interpreta molte cose secondo gli standard)

[Van Basten 7]

il css l'ho già verificato ma mi dice che non ci sono errori

l'unica cosa che forse mi da un dubbio è che la larghezza è espressa in percentuale e forse questo non è compatibile con ie

[Mich_]

Non e` la percentuale in se`, ma la diversa interpretazione del box model: Infatti (tanto per riassumere all'osso la differenza principale):

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)

Non esistono i tag maiuscoli (anche se i browser li intrpretano lo stesso), per cui il selettore A non esiste (e questo alcuni browser lo notano). Anche la pseudoclasse :HOVER non esiste (e le altre).

[Van Basten 7]

Originariamente inviato da Mich_
Non e` la percentuale in se`, ma la diversa interpretazione del box model: Infatti (tanto per riassumere all'osso la differenza principale):


Non esistono i tag maiuscoli (anche se i browser li intrpretano lo stesso), per cui il selettore A non esiste (e questo alcuni browser lo notano). Anche la pseudoclasse :HOVER non esiste (e le altre).

apparte la modifica delle maiscuole cosa dovrei fare per renderlo compatibile con entrambi?

[Mich_]

Originariamente inviato da Van Basten 7
apparte la modifica delle maiscuole cosa dovrei fare per renderlo compatibile con entrambi?

2. Passare a XHTML Strict (con cui anche IE6 interpreta molte cose secondo gli standard)

In alternativa puoi evitare l'uso di padding e border.

Poi ci sono i vari hack per IE, oppure le "correzioni" mediante commenti condizionali, ma questo complica parecchio il CSS.
Se fai una ricerca nel forum (bottone in alto), trovi centinaia di post che riguardano le differenze fra IE e gli altri.
Nei "link utili" c'e` anche una sezione di hack per IE

[Van Basten 7]

ho provato togliere padding e border ma il risultato nn cambia, con ie il div container resta sempre a destra e nn centrato

[Van Basten 7]

IL problema stava nel html e non nel css
TUTTO RISOLTO ORA!

con il validatore html ho trovato la soluzione cmq grazie dei consigli xkè mi saranno utilissimi anche in futuro

grazie mille