Z-Index & Background issues

Hi Everyone,

I have two problems on my site- (link: http://www.sophieshepherd.com/curt/ )

The first is that my dropdown nav menu goes behind the top image. I have adjusted z-indexes accordingly, but it still does it. The images are a javascript slideshow - could that code be interfering? I don't know enough about java to solve the problem.

The second question is about the div with the white background (called "main") ... How do I get the white background to extend all the way to the footer, even if it is not filled with content? Also, how can I get the footer to "push" down if there is more content? It seems that the sidebar is controlling the positioning of the footer, rather than the main text area. On other pages, I will have a lot more content and need the footer to be pushed down accordingly.

Thanks all!!

Hello sophshep,
I think you have a lot of unnecessary positioning. When you put #line outside of #container in the markup and the position #main over it... it's just a lot of extra work for something those elements would do on their own without any positioning at all.

To fix your menu though, try changing the z-index on #line to a higher number.

Thanks, Excavator. Changing the z-index of my div "line" (since renamed header) did the trick.

I tried cleaning up my positioning as well, but I'm still fully getting the hang of how it all works... still having trouble with my main content not pushing down the footer. Any suggestions?

Thanks, Excavator. Changing the z-index of my div "line" (since renamed header) did the trick.

I tried cleaning up my positioning as well, but I'm still fully getting the hang of how it all works... still having trouble with my main content not pushing down the footer. Any suggestions?

See if changing that negative bottom margin on #sidebar helps, like this -
#sidebar {
width: 300px;
position: relative;
bottom: 0px;
margin: -80px 5px 0;
padding: 0px 0px 100px;
float:left;
background:url(../images/bg_side.png) repeat #1f3f5f;
-moz-box-shadow: 0px 0px 9px #000;
-webkit-box-shadow: 0px 0px 9px #000;
box-shadow: 0px 0px 9px #000;
z-index: 2;

}

It helped, but didn't solve it. Here's a screenshot:

http://www.sophieshepherd.com/curt/screenshot.tiff

The footer is stuck to the bottom, which is good, but I want to blue and white Divs to extend all the way to the bottom no matter what.

It helped, but didn't solve it. Here's a screenshot:

http://www.sophieshepherd.com/curt/screenshot.tiff

The footer is stuck to the bottom, which is good, but I want to blue and white Divs to extend all the way to the bottom no matter what.

Yes, it just doesn't work very well with all that positioning. Have a look at a full height layout that works (http://nopeople.com/CSS%20tips/full-height-layout/index.html). It wouldn't be too difficult to adapt your site to this method.

Yahoo! It worked! Always feels so good to figure something out that has been broken for so long. Thanks so much excavator!