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/
