Try "img { display: block }" or "img { display: inline-block }"
On Thu, 14 Aug 2014, Tim Dawson 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
--
Chris F.A. Johnson, <http://cfajohnson.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/
