Почему темно-синий фон не отображается в FireFox (в IE)?

Question

Скажите, пожалуйста, почему синий фон (между основным белым и внешним голубым) не отображается в FireFox?Он отображается в IE.

URL сайта - http://www.moorespeed.co.uk/

Соответствующий код: http://www.moorespeed.co.uk/Content/site.css

#page 
{
    background-color:#082d47;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 0 0;
    width: 970px;
}

Answer 1

Как обычно, когда есть разница в том, как Internet Explorer и Firefox отображают страницу, Internet Explorer ошибается.

В данном случае это хорошо известная ошибка в Internet Explorer. Когда элемент имеет плавающие элементы, которые больше, чем элемент, IE будет корректировать размер элемента в соответствии с дочерними элементами.

Это неправильно, и Firefox правильно отображает код.

Однако вы можете добавить CSS к элементу page, чтобы он получал свой размер от плавающих дочерних элементов. Вы просто указываете значение для атрибута overflow, например overflow: hidden;, для правила #page, и вы полностью получаете фон.

Правило overflow не меняет способ обработки переполнения содержимого, так как вы не указали никакой высоты, переполнения нет, но оно влияет на размер элемента.

Answer 2

Ваш #main div является плавающим, и контейнер автоматически не расширяется и содержит плавающие дочерние элементы Однако, если вы примените overflow:auto к #page, оно должно расшириться так, как вы ожидали:

#page 
{
  background-color:#082d47;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 0 0;
  width: 970px;
  overflow:auto;
}