Fixed Foot Nav Bar

[powersstuff]

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;
}