Slider Width and Height Question

HTML & CSS
1

Hi

On my website: http://beverleydyersolutions.com I have a slideshow.
I noticed that when the page loads, the slideshow is not visible, then everything else loads and the page moves down
to accommodate the size of the slideshow.

How can I fix this so that I can set the width and height in the .css file so that it doesn’t do this?

Thanks.

K

2

Kath,

It appears that there is already a width set on that div but if you want to set the height, the code is in style.css and looks like this:

.slider {
width: 940px;
overflow: hidden;
}

Hope that helps,

Shawn

3

Kath,

Images take a little time to load, 3 images take 3 times longer. The carousel JavaScript does not create the space for the slider until all images have loaded; thus, the delay. This also serves to avoid rendering a glaring block of white space in the window of users who do not have JavaScript turned on. In other words, it serves a purpose.

The solution suggested by Shawn will preserve that white space, even if JavaScript is turned off. You will have to determine the height of the slider and assign the height.

That code for the slider is found in:

<link rel=‘stylesheet’ id=‘theme-style-all-css’ href=‘http://beverleydyersolutions.com/wp-content/themes/rttheme17/css/style.css?ver=3.5.1’ type=‘text/css’ media=‘all’ />
(line 355)

A smarter solution might be to add a line of JavaScript that supplies that height value immediately when the browser detects that JavaScript is enabled. The user would see the white space until the carousel loads the images.

A JavaScript person could help with that approach.