Salve a tutti, sto provando a disegnare ex novo un layout per il mio blog con wordpress.
Anche grazie alle splendide guide trovate sul web, finora è andato tutto liscio con una resa grafica più che buona ed un'ottimo risultato a livello di compatibilità fra i vari browser.
Proprio sul più bello però, ecco il caro buon (ed è ormai il caso di dire) vecchio IE 6.0 farmi l'improvvisata..
Vi spiego il problema cercando di essere quanto più chiaro possibile..
Il corpo centrale del mio blog (immediattamente sotto l'header e prima del bottom) è racchiuso in un div che chiamo wrapper!
Wrapper ha una lunghezza fissata in pixel a 770
Il corpo (wrapper) deve gestire due elementi, ossia la barra laterale che chiamo sidebar e che imposto a sinistra e il contenuto della pagina che chiamo content che imposto a destra..
Per convenienza grafica, nè sidebar, nè content devono essere troppo "attaccati" ai rispettivi margini (sx per sidebar, dx per content)
L'idea grafica è pressocchè quella che posto in questa img..
Ho utilizzato il disegno per farvi capire l'importanza di alcuni fattori a livello grafico. Il layout prevede una certa equidistanza tra sidebar e la sua sinistra, sidebar e content, content e la sua destra.
Sperando di essere stato finora chiaro, passo al codice che ho utilizzato per ottenere ciò!
#wrapper
{
width: 770px;
margin: 0 auto;
overflow: hidden;
}
#content
{
margin-right: 25px;
width: 514px;
float: right;
}
#sidebar
{
width: 175px;
margin-left: 25px;
}
vi ho risparmiato i vari stili grafici scrivendo solo la parte che interessa il piazzamento degli oggetti.
Con questo codice ottengo con FIREFOX (v 1.5) un layout perfetto con la sidebar piazzata a sinistra, lunga quanto voglio e distante 25px
dalla sinistra. Il corpo è 25 px distante da destra ed infine i due elementi distano tra di loro 25px!!!
Ma Internet Explorer non la pensa cosi! In breve il corpo è distante non 25 px dalla sua destra ma molto di più! Questo finisce per farlo invadere la parte destinata alla sidebar che di conseguenza finisce a fondo pagina.
Ho cercato di analizzare il problema in quanto la cosa che mi incuriosiva era questa: sempre con IE, la distanza tra sidebar e la sua sinistra è perfetta ed uguale a quella di FIREFOX.. solo quella di content è diversa, eppure l'attributo utilizzato (margin) è lo stesso per le due !!!
Unica differenza che potete notare tra i due elementi è la presenza dell'attributo FLOAT per content..
Più di questo non sono riuscito a scoprire e ho fatto prove e controprove.. qualcuno saprebbe aiutarmi? E' importante che scriva CSS valido e compatibile con tutti i browser però..
Scusate se sono stato lungo e ancora grazie..
Rispondi quotando
)
