Ошибка в столбцах CSS - только 5 столбцов с 4-мя изображениями

Я пытаюсь реализовать Криса Койерапример использования CSS-столбцов для создания бесшовной адаптивной сетки изображений.

Я положил файлы Криса на свой сервер, и все выглядело хорошо. Единственное, что я изменил, были настоящие изображения.

Теперь, как вы видите на моемтестовая страница, есть только 4 столбца изображений вместо указанных 5, используяcolumn-count:5;, Пятый столбец - это просто пробел без контента.

Это происходит только тогда, когда окно браузера больше 1200 пикселей. Когда окно браузера меньше 1200 пикселей, медиазапросы включаются и уменьшают количество столбцов 4, 3, 2 и, наконец, 1. Другими словами, эта ошибка возникает только тогда, когдаcolumn-count: 5 и выше

Это происходит в FF 10, Chrome 17+ и Safari 5+.

Любая помощь будет оценена!

Вот урезанный HTML:

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

Вот нетронутый CSS:

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Ответы на вопрос(3)

Ваш ответ на вопрос