Jquery анимация Quandry

Question

У меня проблема с тем, что div скользит в поле зрения, но в нем отсутствует фрагмент, который появляется только после прекращения скользящего действия.

Div происходит из 'display: none', и вот соответствующий jquery:

$('#maincontent').show('slide', { direction: 'left' }, 500);
})

Вы можете просмотреть страницу в реальном времени и источник здесь:

http://joepolitic.com/sites/AlmostFamous.html

Есть предложения?

Спасибо

Answer 1

Я думаю, что проблема связана с тем, как браузер отображает поля и отступы. Теги H1 и P имеют значения по умолчанию для полей и отступов.

Фон будет отображаться, если вы удалите теги h1 и p или выделите поля и отступы следующим образом:

h1,p{margin:0;padding:0;}

Answer 2

Похоже, что раздел 8.3.1 спецификации CSS1 является релевантным: поле div #maincontent и поле h1 рушатся, в то время как div #maincontent располагается относительно генерируемого jQuery пользовательского эффекта- обертка.

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Добавление 1-пиксельного отступа в div #maincontent предотвращает сворачивание полей и устраняет проблему, позволяя сохранять поля вокруг h1.

#maincontent {
    padding: 1px;
}