Question

I have a weird issue with my CSS. Really can’t figure this one out. I’ve created this website at http://www.replyonline.co.uk/DirectionGroup/xmas/

You can drag up and down to go though the gingerbread photos. Just below it is about 60px of space which shows the brown background. I’m trying to eliminate this space to the photos go right to the footer.

.ib-top is the bar along the top which is a div with a set width and height and the background image set to it.

.ib-top{
background: url(../images/bg-top.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 175px;
z-index: 9999;
}

I’ve noticed that if I take out height: 175px; on .ib-top the photos move to the footer as preferred however the .ib-top background image doesn’t show because of no height set.

How can I figure this out?

Thanks

Answer 1

Go to your JS and look for this line:

$ibWrapper.css( 'height', $(window).height() - containerMargins )

And add the 60px you need, making it like this:

$ibWrapper.css( 'height', $(window).height() - containerMargins + 60 )