Pourquoi mon div à gauche flottant va-t-il à la ligne suivante dans IE6 en utilisant le 960.gs?

Question

J'utilise le système de grille 960 pour créer un site (www.960.gs).

J'ai un div de 9 colonnes (grid_9) avec deux div à l'intérieur (grid_5 et grid_4).

Ceci est destiné à produire un grand div externe avec 2 divs internes assis côte à côte à l'intérieur de celui-ci.

Toutefois, lorsqu'il est affiché dans IE6, il affiche un div plus grand avec deux divs internes, l'un en dessous de l'autre.

Dans Firefox les divs sont assis côte à côte, comme ils sont censés le faire, et la même configuration fonctionne très bien dans d'autres parties du site.

Que se passe-t-il? Je ne peux pas m'en sortir.

Voici le code 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

Sans être en mesure de voir plus de ce qui se passe, je pense que le contenu de vos divs internes pousse leur largeur plus grande que leur contenant. IE6 ne respecte pas la désignation de la largeur d'un conteneur si le contenu pousse cette largeur du tout.

Mais postez plus de code ou un lien si vous le pouvez!

Answer 2

La ligne:

"et la même configuration fonctionne très bien dans d'autres parties du site."

me conduirait à regarder le rembourrage, les marges et la largeur du contenu au sein les divs grid_4 et grid_5, de ce que je me souviens du modèle de boîte est assez squameuse dans IE6.

Egalement IE6 (et éventuellement plus tard) a un problème en ce que italique le contenu est toujours plus large que prévu et pourrait conduire à la div externe (grid_4 ou grid_5) étant plus large que prévu.

Answer 3

Pourrait être quelque chose d'aussi simple que la propension de IE6 à double-pad. Si vous osez présenter le système de grille 960 avec un hack, essayez ceci:

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

IE6 rendre la règle de _padding - autres navigateurs ne seront pas. Cela fonctionne pour n'importe quelle règle: règle de style normal, d'abord; IE6 _rule, après.