IE7 Not Playing Nice with My Floating Sidebar

Question

Sto provando a far fluttuare una barra laterale di dimensioni dinamiche nella parte in alto a destra delle mie pagine web (ma sotto l'intestazione e nav) e avere il contenuto principale sulla pagina che scorre intorno (in una sorta di "L" tranne che con la parte inferiore della "L" molto spessa). La larghezza e l'altezza della barra laterale varieranno da una pagina all'altra, quindi non posso usare valori rigidi.

mio css assomiglia:

#main { 
    width: 850px; 
    height: auto; 
} 

#sidebar { 
    width: auto; 
    float: right; 
} 

(oltre a qualche codice di colore padding, margini, e lo sfondo penso che è irrilevante)

mio html assomiglia:

<div id="wrapper"> 
    <div id="header"> /* header stuff */ </div> 
    <div id="nav">  /* nav stuff */  </div> 

    <div id="sidebar"> 
     /* my sidebar content, really just an h3 and a ul */ 
    </div> 

    <div id="main"> 
     /* lots of content here */ 
    </div> 
</div> 

I don capisco completamente perché devo prima avere la barra laterale div, ma questo codice funziona bene in FF, Chrome, Safari (Windows) e IE8. Ma su IE7 (e IE6, di cui non mi interessa), il contenuto principale viene spinto in basso nella parte inferiore della barra laterale, come se ci fosse un "clear: left" sul div sidebar (ma non c'è) .

Ho la sensazione che questo sia uno di quei malvagi bug di non conformità di IE7, soprattutto perché IE8 si comporta esattamente come gli altri browser. Ma non ho idea di come aggiustarlo.

Qualche idea? TIA.

Answer 1

In primo luogo, assicurarsi che si sta utilizzando un DOCTYPE che metterà IE7 in modalità rigorosa (vedi http://hsivonen.iki.fi/doctype/ per una spiegazione). se non lo fai, potrebbe essere che hai bisogno di giocare nella larghezza dei margini.

Il motivo per cui è necessario avere prima il div della barra laterale, poiché div è un elemento di blocco visualizzato dopo di esso, sarà sotto di esso (a meno che non si fluttui il div principale).

Spostando la barra laterale div e inserendola per prima, il browser sa che può visualizzare il div principale a destra della barra laterale. Potresti ottenere un effetto simile aggiungendo il float a sinistra al div principale e rimuovendo il float dal div sidebar e spostandolo dopo il div principale.

Answer 2

Da quello che descrivi, sembra che la barra laterale si comporti come se fosse un elemento di blocco. Forse prova alcune opzioni di visualizzazione differenti come il blocco inline. Proverò anche a sperimentare con gli attributi larghezza-larghezza min. Difficile a dirsi però.

Answer 3

Bingo! Fisso! I ragazzi che hanno menzionato di giocare con larghezze e margini ottengono stasera le stelle dorate. Si è scoperto che tutto ciò che dovevo fare era rimuovere la larghezza fissa sul div principale, quindi aggiungere del padding sulla destra per creare una grondaia per testo e immagini. Testato e confermato in FF3, Chrome, Safari (Win) e, soprattutto, IE6 & IE7 (anche se odio ancora IE).

Immagino che il motore di rendering di IE dicesse: "Vedo che vuoi che il tuo div principale sia largo 850px, ma con quella barra laterale che hai bloccato lì, non ho spazio quindi dovrò spingerlo sotto la barra laterale ". Ovviamente, il motore di rendering di tutti gli altri browser ha detto: "Amico, capisco perfettamente quello che stai cercando di fare! Nessun problema, esporrò tutto esattamente come vorresti."