Max-height: and overflow: both inored in all browsers...

Hi.

I have made a fixed Navbox (fixed) that sits on the right-hand-side of my fixed width site for navigation purposes. It is fixed to the 1000px wide <div class="wrapper"> that encloses my site and not the viewpoint. Great, as viewers scroll the page the navbox (fixed) is always visable.

But if I put too many links in the navbox (fixed) it runs over the bottom of the viewpoint and you can not see them or get to them. I thought, simply give the navbox (fixed) a max-height: 300px; and an overflow: auto; and when too many links push passed 300px the navbox (fixed) will give itself a scrollbar...however, for some reason both max-height and overflow are both being ignored! Help me if you can...Here's a little code.

CSS Sheet
div.fixed {
position: fixed;
width: 160px;
height: 300px;
top: 290px;
border: 1px solid #cccccc;
padding: 3px 3px 3px 7px;
background-image: url(../images/bgdwhite.png);
z-index: 3;
margin-left: 800px;
overflow: auto;
}

HTML Sheet
<div class="fixed">
<div class="blogarchives"><a href="#top"><b>&middot; Top of Page&nbsp;</b></a></div>

<!-- PAGE INDEX PAGE INDEX PAGE INDEX PAGE INDEX PAGE INDEX PAGE INDEX PAGE INDEX PAGE INDEX PAGE INDEX -->
<div class="headers" style="margin-top: 5px;">Page Index</div>
<div class="blogarchives"><a href="#fearofgod">&middot; The Fear of God</a></div>

<!-- Blog ARCHIVE Blog ARCHIVE Blog ARCHIVE Blog ARCHIVE Blog ARCHIVE Blog ARCHIVE Blog ARCHIVE Blog ARCHIVE -->
<div class="headers" style="margin-top: 5px;">Blog Archives</div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div>
</div><!-- END FIXED -->

 

Just to say, this is not an IE issue but all browsers, I do not bother supporting IE6, I threw all the:

<div class="blogarchives"><a href="blog.html">&middot; Current blog</a></div> tags in to push it over 300px

 

I don't see max-height in your css. Changing height to max-height seems to work.

 

Your script seems fine to me.
Is possible that your CSS overriden later by javascript?

Regards,