Image filmstrip - Stretch with page

[shonamelissa]

Hi everybody,

I'm hoping this will be a quick one for someone to fix for me. I have a vertical filmstrip on my page which scrolls through images when you hover over an up/down arrow and at the moment it shows 4 images before you have to scroll down.
I would like it to grow and shrink with the page (just like a div). The CSS is:

#galleryContainer{/* Big Div surrounding up image, list of images and down image */
float:left;/* Floating */

/* CSS HACK */
height: 454px;/* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
height/* */:/**/438px;/* Other browsers */
height: /**/438px;

/* CSS HACK */
width: 124px;/* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
width/* */:/**/120px;/* Other browsers */
width: /**/120px;

border:0px solid #fff;/* Black border */
padding:1px;/* A little space between the black border and the content inside */

}
#galleryContainer #arrow_down{/* Arrow down image */
height:35px;
}
#galleryContainer #arrow_up{
height:35px;/* Arrow up image */
}

#theImages{/* DIV where the images are located */
position:relative;
overflow:hidden;
height:375px;/* Height of boxes for the images */
}
#theImages div{
position:relative;/* Don't change this */
height:1500px;/* Higher than total height of thumbnails */

}
#theImages img{
border:0px;/* No border */
filter:alpha(opacity=50);/* Transparency - IE */
opacity:0.5; /* Transparency - Firefox */
padding-top:1px;/* Space between images */
}

and the Code is:

<div id="galleryContainer">
<div id="arrow_up"><img src="layoutpics/arrow-up.gif" id="arrow_up_image" alt="Scroll Up" name="arrow_up_image" /></div>
<div id="theImages"><div>IMAGES GO HERE<div id="slideEnd"></div></span>
</div>
</div>
<div id="arrow_down"><img src="layoutpics/arrow-down.gif" id="arrow_down_image" alt="Scroll Down" name="arrow_down_image" /></div>
</div>

If you need to see it working please visit <snip>

I hope somebody can assist!
Thanks!

Shona

[edited by: swa66 at 12:10 am (utc) on Dec. 11, 2009]
[edit reason] No links please, see ToS and Forum Charter for guidance [/edit]

[limbo]

Hi Shonamelissa

What you're trying to achieve is a little tedious with CSS as (surprise surprise) IE does not render % heights consistently.

Here some great reading on the topic to help:

[webmasterworld.com...]