You have a classic margin collapse. Look at "div#pananim". That element has a 51pxtop margin that is pushing through the parent. Add a 1px top padding to #outer.
I'm not sure hte overall look you are going for; but it is a margin collapse. On Sat, Jun 6, 2015 at 9:40 AM, Tim Dawson <t...@ramasaig.com> wrote: > I'm working on a web site which has a menu bar at the top, with a large > banner image below. > http://holidaymullandiona.com > > The menu bar (<nav>) stays in place as the page is scrolled up (courtesy > of jQuery). It is positioned absolutely wrt a div.outer. The banner has six > images which are rotated (also with jQuery). The images, with overlying > text, are each contained in a <div> which is absolutely positioned wrt a > containing <div id='pananim'>. That div is given height by using JQuery to > clone one of the divs after loading and make its position static. That all > works satisfactorily. > > But the entire page is displaying with a 51px gap at the top. The HTML > after loading follows this outline. I have shown the relevant CSS beside > each element: > > <body> > <div class='outer'> {position: relative;} > <nav> {position: absolute; wrt .outer} > nav stuff here > </nav> > <div id='pananim'> {position: relative; margin-top: 51px;} > <div> {position: static;} > image and text in each div > </div> > <div> {position: absolute; wrt #pananim} > image and text in each div > </div> > > five more similar divs... > > </div> > > <div class='inner'> > home page content... > </div> > <footer> > </footer> > </div> > </body> > > To see this outline you'll need to be able to view the generated source. > > The <nav> has a height of 51px (50px image plus 1px border-bottom), so to > get the absolutely positioned divs that are inside div#pananim to display > in the right place I've given div#pananim a margin-top of 51px. So far so > good, but the whole page has now acquired a gap at the top (occupied only > by HTML), and I can't work out why. > > My understanding is that absolute positioning is with respect to the > BORDER position (if there were one), that's to say it's outside the > padding, but inside any margin. Hence the {margin-top: 51px}. > > I can get rid of the gap by taking the {position: relative;} OFF > div.outer, but that leaves the <nav> positioned with respect to the body, > which I suppose is OK but not what I'd like. > > In the hope of clarifying a bit, I've put a RED outline on the body and > GREEN on the div.outer. > This is the large screen version. The same happens on small screens, but > the menu is hidden until the green icon is clicked (prodded). > > I think the gap must come about because I've got confused with my > {position: relative} and {position: absolute;}. Can anyone offer some > guidance, please ? > > Tested in Firefox and Chrome and briefly in IE11. > > Regards, > > Tim Dawson > > > -- > Tim Dawson > Maolbhuidhe > Fionnphort > Isle of Mull PA66 6BP > > 01681 700718 > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Ryan Reese ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
