Layering problem

programming web dev
1

Hi Guys,
I have tried everything I know to fix this problem. I am trying to get the logo above the nav bar…z-index doesn’t seem to be working. Logo is in the header and nav is in menu. Any ideas?

#container  {
    width: 826px;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #FFFFFF;
    background-image: url(bg.jpg);
    height: 1022px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    z-index: 1;
    position: relative;
}
#header  {
    height: 184px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 50px;
    left: 0px;
    z-index: 3;
    background-repeat: no-repeat;
    visibility: visible;
    position: relative;
}
#menu
{
    width: 776px;
    height: 63px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    position: relative;
    right: 20px;
    background-image: url(menu.jpg);
    background-repeat: repeat-x;
    z-index: 2;
    bottom: 90px;
}

<div id="container">
<div id="header"><img src="logo.png" alt="" width="219" height="184" />
  <div id="menu">
           <a class="active" title="Home" href="#">Home</a>
        <a title="Shirts" href="#">Shirts</a>
        <a title="Ties" href="#">Ties</a>
        <a title="Contact" href="#">Contact Us</a> </div></div>
2

Link please! (-:

3

Try making positions absolute?

4

Here is the link to the page

page