IE7 spielt nicht gut mit meiner schwebenden Sidebar

Question

Ich versuche, eine dynamische Größe Seitenleiste im oberen rechten Teil meiner Webseiten (aber unter der Kopfzeile und nav) zu schweben und haben den Hauptinhalt auf der Seite herumlaufen es (eine Art von "L" Form, außer mit dem unteren Teil des "L" wirklich dick). Die Breite und Höhe der Seitenleiste variiert von Seite zu Seite, daher kann ich keine harten Werte verwenden.

Meine CSS wie folgt aussieht:

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

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

(plus einige Polsterung, Marge und Hintergrundfarbe Code, den ich denke, ist belanglos)

Meine html wie folgt aussieht:

<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 verstehe nicht vollständig, warum ich die Seitenleiste div zuerst haben muss, aber es funktioniert gut in FF, Chrome, Safari (Windows) und IE8. Aber auf IE7 (und IE6, die mich nicht interessieren), wird der Hauptinhalt unter den unteren Rand der Seitenleiste geschoben, als ob es ein "clear: left" auf der Seitenleiste div gibt (aber das ist nicht) .

Ich habe das Gefühl, dies ist einer dieser bösen IE7 Non-Compliance-Bugs, vor allem weil IE8 genau wie die anderen Browser verhält. Aber ich habe keine Ahnung, wie ich es beheben kann.

Irgendwelche Ideen? TIA.

Answer 1

Zuerst stellen Sie sicher, dass Sie einen Doctype verwenden, der IE7 in strikten Modus versetzt (siehe http://hsivonen.iki.fi/doctype/ für eine Erklärung). Wenn das nicht klappt, kann es sein, dass Sie etwas Spiel in den Randbreiten benötigen.

Der Grund, warum Sie die Seitenleiste div zuerst haben müssen, ist, da div als ein Blockelement angezeigt wird, alles danach, wird darunter sein (es sei denn, Sie floaten das Hauptdiv).

Durch das Schweben der Seitenleiste div und setzen Sie es zuerst, der Browser weiß, dass es das Hauptdiv auf der rechten Seite der Seitenleiste anzeigen kann. Sie können einen ähnlichen Effekt erzielen, indem Sie float left zum main div hinzufügen und den float von der sidebar div entfernen und ihn nach dem main div verschieben.

Answer 2

Von dem, was Sie beschreiben, es klingt wie Ihre Sidebar verhält sich, als ob es ein Blockelement war. Vielleicht versuchen Sie es mit verschiedenen Anzeigeoptionen wie Inline-Block. Ich würde auch versuchen, mit den Attributen width min-width zu experimentieren. Schwer zu sagen, obwohl.

Answer 3

Bingo! Fest! Die Jungs, die erwähnt haben, dass sie mit Breiten und Rändern spielen, bekommen heute Abend die goldenen Sterne. Es stellte sich heraus, dass ich nur die fixierte Breite des Hauptdivs entfernen und dann rechts etwas Füllung hinzufügen musste, um eine Rinne für Text und Bilder zu erstellen. Geprüft und bestätigt in FF3, Chrome, Safari (Win) und vor allem IE6 & IE7 (obwohl ich immer noch IE hasse).

Ich denke, die IE-Rendering-Engine sagte: "Ich sehe, dass Sie möchten, dass Ihr Hauptdiv 850px breit ist, aber mit dieser Sidebar, die Sie dort stecken, habe ich keinen Platz, also muss ich es schieben unter der Seitenleiste ". Natürlich hat die Rendering-Engine jedes anderen Browsers gesagt: "Alter, ich verstehe, was du versuchst zu tun! Kein Problem, ich werde alles so einrichten, wie du es möchtest."