Positioning problem!

Ok heres the problem I have two divs, one top the other below (ill get into
specific attributes in a minute..) both of them have a navbar along the
bottom of each of their respective containers and everything is fine in IE6,
but in firefox (I am only testing with two browsers atm firefox/IE6)
the navigation bar on the top contain just completely vanishes when I turn the
contain of the second container to relative positioning.


Heres a photo to show you whats going on... So ya looking at the image the
GREEN AREA (TOP UL) Gets covered up (or goes elsewhere?!) by the DIV ID = BOT
below it in FIREFOX ONLY it does not do this in IE6 and I have not tested other
browsers...

http://img98.imageshack.us/img98/5238/examplejd3.jpg

And here is all the relevant CSS info on the problem


* {
margin: 0px;
padding: 0px;
}
body {
background-color:#CCCCCC;
text-align:center;

}
#wrapper {
position:relative;
width: 774px;
margin: 0 auto;
text-align:left;
}
#clear {
clear:both;
}



#top{
position:relative;
}



#top ul{
float:left; (remember it's under an image so it's at the bottom of the
container still!)
}


#



#bot {
position:relative;
height:235px;
width:774px;
background-image:url(images/spta.jpg);
}

#bot ul {

float:right;
position:absolute;
left: 120px;
top: 196px;
}