Warum geht mein floated link div mit dem 960.gs zur nächsten Zeile in IE6?

Question

Ich verwende das 960 Grid-System, um eine Website zu erstellen (www.960.gs).

Ich habe eine 9 Spalten breite div (grid_9) mit zwei divs drin (grid_5 und grid_4).

Dies soll ein großes äußeres div mit 2 internen divs ergeben, die Seite an Seite innerhalb davon sitzen.

Wenn es jedoch in IE6 angezeigt wird, wird es als ein größeres div mit zwei internen Divs angezeigt, eins unter dem anderen.

In Firefox sitzen die divs nebeneinander, wie sie gemeint sind, und das gleiche Setup funktioniert auch in anderen Teilen der Site.

Was ist los? Ich kann es nicht schaffen. Hier

ist die html:

<div class="ContentWrapper grid_9 alpha omega"> 
     <div id="MainTitleWrapper" class="standardColor"> 
      <h2><span class="Rating"><%=Model.Rating%></span><%=Model.ScreenName%></h2> 
     </div> 
     <div class="MainContentWrapper standardColor"> 
      <div class="grid_5 alpha"> 
        <h3>Ranked This Week In:</h3> 
        <div class="TagContentList"> 
         <ul> some stuff</ul> 
        </div> 
      </div> 
      <div class="grid_4 omega"> 
        <h3>Latest</h3> 
        <div class="tweet"> 
        </div> 
      </div> 
     </div> 
    </div> 

Answer 1

ohne die Möglichkeit, mehr von dem sehen, was los ist, würde ich den Inhalt des internen divs erraten treibt ihre Breite größer zu sein als ihre Behälter. IE6 respektiert die Breite eines Containers nicht, wenn der Inhalt diese Breite überhaupt verschiebt.

Aber poste mehr Code oder einen Link, wenn du kannst!

Answer 2

Die Linie:

"und die gleiche Einrichtung funktioniert in anderen Teilen der Seiten in Ordnung."

führen würde mich an den Polstern, Margen und Breite des Inhalts innerhalb der grid_4 und grid_5 divs zu suchen, von dem, was ich das Box-Modell erinnere in IE6 ziemlich flockig ist.

Auch IE6 (und möglicherweise später) hat ein Problem darin kursiv Inhalt ist immer breiter als Sie erwarten und könnte dazu führen, dass die äußere div (Grid_4 oder Grid_5) breiter ist als Sie erwarten.

Answer 3

Könnte so einfach sein wie IE6's Double-Pad. Wenn Sie das 960 Grid-System mit einem Hack wagen zu präsentieren, versuchen Sie dies:

padding: 10px; /* whatever the padding is supposed to be for normal browsers */ 
_padding: 5px; /* half of that for IE6 */ 

IE6 die _padding Regel machen - anderer Browser nicht. Dies funktioniert für jede Regel: normale Stilregel, zuerst; IE6 _rule, nach.