Reply To: Slider displays weird.

[Ed]

At a glance, I think this happens because the CSS to style your scrolling images doesn’t get properly applied until the page has finished loading and the JavaScript plugin can execute it’s code for the hover scroll effect.

What you could do is hide the whole thing (ul.banners.list) and only display it when the JavaScript plugin has finished execute and applied its styles.

Unfortunately, that’s not very easy to do because the ul that contains the banners doesn’t have any classes applied to it when the JS is finished, although it does have a style="width: XXXpx;" attribute applied, so we can use that:

ul.banners.list {
    display: none;
}

ul.banners.list[style*="width"] {
    display: block;
}

What we’re doing there is hiding the container until the JavaScript has swooped in and added a width style inline, on the container. The second CSS selector simply doesn’t kick in until the element selected has an attribute of style and that attribute contains the text “width”.

It’s quite a hacky solution that won’t work in IE 6, but that shouldn’t matter to you because less than 1% of English-speaking users still use IE 6, and anyway it’s not a show-stopping bug – even if they do see it, it’s only for a few seconds.