Jquery animation quandry

I am having a problem where a div slides into view, but has a piece missing from i开发者_开发问答t that only shows up after the sliding action stops.

The div is materializing from 'display:none', and here is the relevant jquery:

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

You can view the live page and the source here:

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

Any suggestions?

Thanks

I think the problem has to do with how the browser renders margin and padding. H1 and P tags have default values for margin and padding.

The background will show up if you remove the h1 and p tags, or if you style out the margin and padding like this:

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

It looks like the section 8.3.1 of the CSS1 specification is relevant: the margin of the #maincontent div and the margin of the h1 are collapsing while the #maincontent div is positioned relatively in the jQuery-generated ui-effect-wrapper.

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

Adding 1-pixel padding on the #maincontent div prevents the margins collapsing, and fixes the problem while allowing you to keep margins around the h1.

#maincontent {
    padding: 1px;
}