IE non visualizza alcuni bordi

[Aft3rlif3]

Ciao,

ho installato un tema per wordpress sul mio blog,

fin dall'inizio presentava differenze di visualizzazione tra IE e firefox (originale) ma dopo aver apporato delle modifiche e riaggiustato un po' il codice il problema non l'ho risolto.

I problemi principali sono due: il border-bottom dell'header in IE non viene visualizzato e la testata della sidebar a destra non rispecchia padding e margin impostati...

Potete aiutarmi a trovare il problema?

[Aft3rlif3]

Ho trovato il problema

Praticamente la barra di navigazione a un margin-top: -0.9em; adesso su ie si vede bene ma su firefox c'è uno spazio vuoto tra il menu e l'header.

E adesso? :master:

[Mich_]

E` un bug noto di IE: il box-model e` diverso.

Puoi passare a XHTML Strict (in cui anche in IE il box-model viene interpretato secondo il W3C), oppure inserire dei commenti condizionali per correggere i dati in IE:
<style ...>
stile per browser conformi
</style>
<!--[if IE]>
<style...>
stile interpretato solo da IE per correggere gli attributi diversi
</style>
<![endif-->

[Aft3rlif3]

Sicuro che il problema della barra di navigazione dipenda da questo?

IL bug non riguarda le dimensioni dei box? Potresti darmi un link dove è spiegato in modo completo questo bug?

Ciao e grazie

[Mich_]

Qualche link lo trovi nel forum: fai una ricerca con le parole: box-model o simili

Il problema dovrebbe anche essere accennato nel capitolo sul box-model del tutorial sui CSS del sito HTML.it.

Altrimenti trovi esempi nei layout citati nei "link utili" di questo forum.

Per il resto non so se e` esattamente quello il problema (non ho IE per verificare le differenze): pero` dalla domanda (che si ripete nel forum almeno una volta la settimana) direi che il problema e` quello.

[Aft3rlif3]

Il bug sul box-model sapevo che era questo: http://constile.org/tutorial/IE5_box_model/

Nel mio caso il problema sembra essere diverso, in firefox la barra viene spostata verso il basso come se ci fosse un br (vedi allegato).

il codice è questo:

<div id="nav">
<div id="navwrap">
<ul>
[*]home
[/list]
</div>
<div>

css

#nav{
background:#3A3A3A;
border-bottom:1px solid #555;
font-size:1.2em;
margin-top:0; /* con -0.9em ok in firefox ma non in IE */
}
#navwrap{
display:block;
margin:0 auto;
width:760px;
}
#nav ul{
list-style-type:none;
margin-left:-27px;
}
#nav ul li{
float:left;
font-weight:bold;
margin-top:2px;
padding:9px 10px;
}
#nav ul li a{
color:#fff;
}
#nav ul li a:hover{
color:#BDE271;
}

[Mich_]

Il problema sta nel padding che usi nel[*] e nella differente interpretazione di padding (e border) nel box-model dei vari browser.

Se puoi togliere i padding, fai un bel passo verso l'interpretazione uguale.

[Aft3rlif3]

Scusa ma sono un po' duro

Se tolgo il padding avrò l'effetto di rimpicciolire la barra ma non riuscirò a togliere lo spazio che ci stà sopra. Forse dall'immagine non si vede ma le dimensioni della barra sono quasi identiche tra IE e firefox, in quest'ultimo (immagine di sx) invece compare lo sfondo tra la testata "verde" e il menu a sfondo "nero".

Forse modificando i margini ma sono a 0

Riporto anche l'header:

<div id="header">
<h1>Francesco Giuntini blog</h1>
<p class="description">Se trovo un motto decente ve lo faccio sapere</p>
</div>

css

#header{
background: #879675;
border-bottom: 2px solid #c4cC91;
padding:0px;
height:80px;
margin:0 auto;
text-align:center;
width:100%;
}
#header h1{
font-size:3.0em;
font-weight:normal;
margin:0 auto;
padding-top:5px;
padding-left:20px;
text-align:left;
width:760px;
}
#header h1 a{
color:#ecefed;
}

#header p{
font-size:1em;
padding-left:20px;
margin:0 auto;
text-align:left;
width:760px;
}

[Mich_]

Intanto ti pregherei di usare correttamente i tag di inserzione del forum. Se inserisci un codice con i tag di quotazione, non mantieni la formattazione e si perde parte del significato. Per inserire il codice ci sono i tag [ code ] oppure [ php ].

Parli di sfondo, ma io non lo vedo nell'immagine. L'unica differenza fra le immagini e` lo spazio occupato in verticale (quello orizzontale in misura molto minore). Tale differenza puo` essere data dal padding, che in IE e` erroneamente (secondo lo standard W3C) incluso nell'height.

e comunque ci sono altre cose che non vanno. L'immagine che vedo io (FF sotto linux) e` molto diversa, direi che contiene errori. Forse hai mescolato formattazione a dimensioni fisse con formattazione fluida.

[Aft3rlif3]

Sarà il caso che crei un tema da me, vengono fuori troppi problemi

Grazie cmq