I'm guessing the initial relatively positioned image is causing this. A lot of times you can get rid of this by floating the image left in the container (and clearing presumably). This may not work for you. in this case. Off the top of my head I can't think of other solutions.
On Thu, Aug 14, 2014 at 2:06 PM, Tim Dawson <t...@ramasaig.com> wrote: > I'm coding a new site and am struggling with a 'wrapping' problem in the > header. > > I have a <div> containing a CSS animation of five* images which appear > sequentially. The images are absolutely positioned in a stack, except for > the first to load, which has relative positioning. That's done with the > intention of getting the containing div to wrap the images without having > to set a height. > > * There's a sixth image, last to load, which fades out initially, but then > doesn't reappear. I did this to avoid loading an image with zero opacity and > having to wait for it to fade in. There are probably better ways to do this, > but that's not the problem here. > > Margins and Padding are set to zero (except the image margin-top) so my > expectation is that the <div> will be the same size as the image plus 48px > of image top margin. > > It works except that I always get two pixels worth of the <div> background > showing at the bottom of the images, and I cannot work out why. > > You can see it at: http://webadit.co.uk/hminew3/ (site is far from complete) > > For this demo the background colour for the animation <div class='pananim'> > is bright green. The 48 pixel gap at the top is deliberate (that's where the > navigation will go). > > The relevant CSS is: > .pananim { > position: relative; > margin-bottom: 0; /* set elsewhere too, but inserted here in hope */ > background-color: #0F0; /* for demo only */ > } > > .pananim img { > position: absolute; > top: 0; > left: 0; > margin-top: 48px; > width: 100%; > opacity: 0; > } > > .pananim img:first-of-type { > position: relative; > } > > The two pixel line disappears if I remove the relative positioning of the > first image, but then the animation <div> collapses, and the main page > heading 'Welcome to Mull & Iona' (purple text) appears above the images. > > I can, of course, make the problem 'go away' by changing the background > colour, but I'd rather know why it happens and correct the CSS. > > I fear I can no longer see the wood for the trees, and would be grateful for > some help, please. > > 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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ 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/
