Topic: 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:

Code: [Select]

<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:

Code: [Select]

#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!