Тело на заднем плане - пустое пространство сверху

Question

Это действительно странно. Когда эта страница просматривается в формате FF, сверху появляется белая полоса, которая является частью тела - я знаю, потому что я использую технику красной рамки, чтобы увидеть элементы.

Есть идеи, почему? http://www.codecookery.com/allbestimages/index.php?main_page=home

Answer 1

попробуйте добавить:

#main-page-body-wrapper{
  height: 0px;
}

или установите цвет фона на черный. Я проверил это в Chrome и Firefox. Используется firebug и инструмент проверки хромового элемента. Это не тело, которое создает пустое пространство, а элемент # main-page-body-wrapper.

Answer 2

Решением было установить отступ / отступ в 0. Надеюсь, это кому-нибудь поможет.

Answer 3

Проблема в том, что ваш элемент #slideshow расположен абсолютно. Это удаляет его из обычного потока страниц, и поэтому ваш #main-page-body-wrapper практически пуст и просто находится в верхней части страницы.

Я предлагаю вам избегать абсолютного позиционирования, если вы действительно, действительно не нуждаетесь в нем. Я бы порекомендовал сделать несколько изменений. Прежде всего избавьтесь от абсолютного позиционирования:

#slideshow {
    height: 541px; /* Height of the slideshow */
    position: relative;
    /* Remove width, left, top and margins from here */
}

position: relative; в вышеприведенном блоке устанавливает текущую позицию в качестве начальной точки для любых дочерних элементов, которые абсолютно позиционированы (например, ваши слайд-шоу изображения). Если это не имеет смысла, проверьте:

http://css -tricks.com / абсолютное позиционирование внутри--относительного позиционирования /

Вам не нужно width: 100% для элементов div и других элементов уровня блока, потому что это значение по умолчанию, поэтому удалите его:

#main-page-body-wrapper  {
    /* Remove width from here */
    text-align: center; /* IE6 centering Part 1 */
}

#main-page-inside-wrapper  {
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0 0;
    width: 1000px; /* Width of the slideshow */
    text-align: left; /* IE6 centering Part 2 */
}

Не понимаю, зачем вам нужно #content-wrapper внутри #main-page-inside-wrapper - похоже, он ничего не делает. Вы должны стараться сделать свой HTML как можно более простым, чтобы избежать путаницы и путаницы; Вам действительно нужно всего 2 деления, чтобы выполнять кросс-браузерную центрирование, как вы делаете, поэтому я бы избавился от #content-wrapper на вашем месте.

Это ни в коем случае не полное решение, но оно должно помочь вам добраться туда, куда вы идете. Удачи!