HTML & CSS
I'm putting together a scrolling slide-show for a client. I've avoided use of a sprite image by animating an Unordered List. See:http://webadit.co.uk/cakelady/?page=wedding My reasoning is that this will make it much easier to change the images subsequently (no need for a new sprite).
When the list scrolls the movement per 'click' is not a multiple of the thumbnail image size, so the space available for the next image on the right is often less than the full width of the image. I find that if the space is less than about 80% of the image width, the image doesn't display at all, leaving a blank space. I don't think this has anything to do with pre-loading, because in fact my development images are repeated several times (just to make up the numbers), so they will already be loaded. I suspect it has to do with the way the browser handles overflow. I've not made the movement a multiple of image size because in practice image size may vary.
So far only tested in Firefox 8.
Is there a way of forcing display of the partial image ?
You've floated the list item images within the containing UL element, so from what I see here, a CSS solution is what you're after.
Thanks for your reply. I'm after any reasonable solution, be it JS or CSS. The LIs are floated because that's the best way I know of getting them to close up with minimal gap between. I tried 'display:inline-block' but it left a gap where the UL background showed through. However, I don't think it's either of those producing this effect (and I recognise that this is a JS forum).
This topic is now closed. New replies are no longer allowed.