On 14/08/2014 20:15, David Hucklesby wrote:
On 8/14/14, 11:06, Tim Dawson wrote:
I'm coding a new site and am struggling with a 'wrapping' problem in the header.
[...]
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)
[...]
Hi Tim,
try changing the line "top: 0;" to "bottom: 0;"
Hello David and Tom,
David's suggestion worked (in Firefox at least), for the absolutely positioned images, but I had
to apply 'top: 2px;' to the relatively positioned image to get the same effect. So what was a 48
pixel gap above the images becomes 50px.
I recall that with relative positioning '...the space that the element would ordinarily have
occupied is preserved.' (Eric Meyer, CSS Definitive Guide). Possibly this lies at the root of
the initial problem too. I still can't work out where those two extra pixels are coming from.
So I've tried Tom's suggestion (floating instead of relatively positioning), and that seems to
have cracked it (subject to further testing both in Firefox and other browsers). So now I have:
.pananim {
position: relative;
background-color: #0F0; /* for demo only */
overflow: hidden;
}
.pananim img {
position: absolute;
top: 0;
left: 0;
margin: 0;
margin-top: 48px;
padding: 0;
width: 100%;
opacity: 0;
}
.pananim img:first-of-type {
position: static;
float: left;
}
'position: static;' on its own doesn't do it, the float is necessary too. The gap at the top is
now exactly 48px as intended, and there's no background showing below the images.
Thank you both for your suggestions.
Tim
--
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/
