Vertical navigation problem

[Perry Mason]

I have a problem positioning a banner in the left vertical navigation bar. Here it is:

http://medeponyms.com/index1

(the banner has clear background and red 1px border)

 

It is supposed to go after the navigation links and before RSS feed and hit counter. If I position it relatively, for some reason, in Firefox and IE7 and higher, it overlies the navigation (while working in IE6 and earlier). If I position it absolutely, it looks fine in Firefox and IE7 - 8, but in earlier versions there is white space between the navigation links and the banner.

 

Here is HTML:

<div id="navwrap" class="navwrap">
	<div id="navtop" class="navtop">
		<ul>
		<li><a href="index.php" 	title="medeponyms home page">	home	</a></li>
		<li><a href="about.php" 	title="about this site">	about	</a></li>
		<li><a href="updates.php" 	title="site updates">		updates	</a></li>
		<li><a href="comments.php" 	title="user feedback">		comments</a></li>
		<li><a href="links.php" 	title="links of interest">	links	</a></li>
		<li><a href="contact.php" 	title="contact information">	contact	</a></li>
		</ul>
	</div>
	<div id="navbanner1" class="navbanner1">
	banner
	</div>
	<div id="navrss" class="navrss"><a href="#" title="subscribe to RSS feed">feed</a></div>
	<div id="navhit" class="navhit">
		<br><a href="#"><img src="#" alt="hit count""></a>
		<br>hit count
	</div>
</div>

 

And the CSS:

#navwrap{
position:absolute;
top:0;
left:0;
width:140px;}

#navtop{
position:relative;
width:99%;
display:block;}

.navtop{
background-color: #6699ff;	
color: #660000;
font-family: "lucida sans", arial, verdana, serif;
font-size: 12px;
text-decoration: none;}

#navtop ul{
list-style: none;
margin:0;
padding:0;
border: none;
display:block;} 

#navtop li{
display:block;
width:140px;
display:block;
float:left;
background-color: #6699ff;
border-top-style:groove;
border-top-color:#cccccc;
border-top-width:2px;}

#navtop a{
display:block;
padding-top:8px;
padding-bottom:8px;
padding-right:28px;
padding-left:12px;
background-color: #6699ff;
color: #660000;
font-family: "lucida sans", arial, verdana, serif;
font-size: 12px;
text-decoration: none;}

#navtop a:hover{
background-color: #9999cc;
color: #ffcc66;
text-decoration: underline;}

#navbanner1{
position:relative;
width:99%;
height:330px;
display:block;}

.navbanner1{
border-style:solid;
border-color:red;
border-width:1px;}

#navrss{
position:relative;
width:99%;
display:block;}

.navrss{
background-color: #6699ff;	
color: #660000;
font-family: "lucida sans", arial, verdana, serif;
font-size: 12px;
text-decoration: none;}

#navrss a{
display:block;
padding-top:8px;
padding-bottom:8px;
padding-right:28px;
padding-left:12px;
background-color: #6699ff;
color: #660000;
font-family: "lucida sans", arial, verdana, serif;
font-size: 12px;
text-decoration: none;
border-top-style:groove;
border-top-color:#cccccc;
border-top-width:2px;}

#navrss a:hover{
background-color: #9999cc;
color: #ffcc66;
text-decoration: underline;}

#navhit{
position:relative;
width:99%;
display:block;}

.navhit{
background-color: #6699ff;
color: #660000;
        font-family: "lucida sans", arial, verdana, serif;
font-size: 12px;
padding-bottom:5px;
text-align: center;
border-top-style:groove;
border-top-color:#cccccc;
border-top-width:2px;}

I've tried changing display to inline with no effect whatsoever. I guess it has something to do with the navigation list (id="navtop") since if I get rid of the banner altogether, the next div (id="navrss") behaves in the same way. Would be grateful fot any suggestions

[Perry Mason]

Ok, I've fixed it by adding clear:both to id="navbanner"

Thanks!