Wracking my brain! I've got a fixed footer nav bar and want it to be tucked behind a small logo image on each end. I've edited the CSS so many times that I can't remember what I started with, but the problem seems to be z-index related. If container is set a -1 then the links do not work, but if the navbar is z-index higher then it covers the images. Please suggest best way to get navbar on top, with its container beneath, and bookend images. Thanks for help.

This is how I want it to look, but need to get the links working:

<div id="fixedfoot_container">
<div id="fixedfoot_content">
<div id="fxfootL"><img src="Images/ship2.png" alt="Cruise Ship CLIPA" height="100" /></div>
<div id="fxfootR"><img src="Images/CLIPA_Logo_100.png" alt="CLIPA Logo" /></div>
<div id="fxfootC">
<div id="navff">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Club Events</a></li>
<li><a href="#">Message Board</a></li>
<li><a href="#">Cruise Reviews</a></li>
<li>
<a href="#">Marketplace</a>
<ul>
<li><a href="#">Clothing</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
</ul>
</li>
<li><a href="#">What to Expect</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Advertise With Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div></div>
</div>


CSS:

#fixedfoot_container{
position:fixed;
bottom:0px;
top:auto;
z-index:10;
width: 100%;
float: left;
}
#fixedfoot_content {
width: 95%;
height: 100px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
z-index: 7;
}
#fxfootL {
float: left;
height: auto;
width: auto;
z-index: 5;
}
#fxfootR {
height: auto;
width: auto;
float: right;
z-index: 5;
}
#fxfootC {
height: auto;
width: 85%;
float: left;
margin: 0px auto 0px 91px;
position: absolute;
bottom: 0px;
background: #102F8C;
left: 4px;
font-weight: bold;
color: #FFF;
z-index: -1;
padding-right: 20px;
padding-left: 20px;
}
#navff{
width: 92%;
height: 40px;
margin-right: auto;
margin-left: auto;
font: 0.8em;
color: #F0F;
background: #102F8C;
padding-right: 20px;
padding-left: 20px;
position: absolute;
bottom: 0px;
left: 1px;
z-index: 2;
}
#navff ul
{ margin: 0px; padding: 0px;}
#navff ul li
{
display:inline;
height:20px;
float:left;
list-style:none;
margin-left: 1px;
position: relative;
}
#navff li a
{
color: #FFF;
text-decoration: none;
font-weight: bold;
padding: 2px 10px 3px 15px;
}
#navff li a:hover
{background: #C00; }
#navff li ul
{
margin:0px;
padding:0px;
display:none;
position: absolute;
left: 0px;
background: #102F8C;
bottom: 21px;
}
#navff li:hover ul
{display:block;
width:175px;
}
#navff li li
{list-style:none;
display:list-item;
}
#navff li li a
{color:#fff; text-decoration:none;}
#navff li li a:hover
{
text-decoration:none;
background: #C00;
}