Тело фона fluke - пробел сверху

Question

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

Любые идеи, почему? http://www.codecookery.com/allbestimages/index.php?main_page=home

Answer 1

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

Answer 2

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

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

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

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/absolute-positioning-inside-relative-positioning/

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

#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 divs, чтобы сделать кросс-браузерное центрирование, как вы делаете, я бы избавился от #content-wrapper, если бы был вами.

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