Почему мой плавающий левый div переходит к следующей строке в IE6 с использованием 960.gs?

Question

Я использую сетку 960 для создания сайта (www.960.gs).

У меня есть div шириной 9 столбцов (grid_9) с двумя div внутри внутри (grid_5 и grid_4).

Это предназначено для получения одного большого внешнего div с двумя внутренними divs, сидящими бок о бок внутри него.

Однако при просмотре в IE6 он отображается как один более крупный div с двумя внутренними div, один под другим.

В Firefox divs расположены рядом друг с другом, поскольку они предназначены, и одна и та же настройка отлично работает в других частях сайта.

Что происходит? Я не могу это решить.

Вот 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

Не будучи в состоянии видеть больше того, что происходит, я предположил бы, что содержание вашей внутренней дивы толкает их ширину, чтобы быть больше, чем их емкость. IE6 не учитывает обозначение ширины контейнера, если контент нажимает эту ширину вообще.

Но отправляйте больше кода или ссылки, если сможете!

Answer 2

Линия:

«и та же установка работает хорошо в других частях сайта.»

привел бы меня посмотреть на отступы, поля и ширине содержания в в grid_4 и grid_5 дивах, от того, что я помню модель коробки довольно слоеная в IE6.

Также IE6 (и, возможно, позже) имеет проблемы с тем, что italic контент всегда шире, чем вы ожидаете, и может привести к тому, что внешний div (grid_4 или grid_5) будет шире, чем вы ожидаете.

Answer 3

Может быть что-то столь же простое, как склонность IE6 к двойной клавиатуре. Если вы решитесь представить систему 960 сетки с хака, попробуйте следующее:

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

IE6 будет оказывать правило _padding - другие браузеры не будут. Это работает для любого правила: правило обычного стиля, сначала; IE6 _rule, после.