Fixed position menu in IE6

HTML & CSS
1

I have a fixed position menu which doesn’t display properly in IE6. I’d ignore it if I could but I still get visitors using IE6. My CSS is:

#menu {
  position: fixed;
  width: 150px;
  left: 10px;
  top: 96px;
}

I have tried the hack

* html #menu {
  position: absolute;
}

but the menu disappears all together.
The site is Little Berkhamsted

2

Hi,

IE6 doesn’t understand fixed positioning so you can place it absolutely and just let it scroll with the page (there are hacks for fixed positioning in IE6 but are not worth the effort these days).


#menu {
    position: fixed;
    width: 150px;
    left: 10px;
    top: 96px;
}
[B]* html #menu {
     position:absolute;
    clear:both;
    z-index:99;
    left:0;
}
[/B]

However you will need to move the menu code to the end of the wrapper to avoid an IE6 bug.


    <!-- end of content -->
    <p id="footer"><span class="leftfoot">&copy; Little Berkhamsted Parish Council</span> <span class="rightfoot">Website
        by <a href="http://www.irwinassociates.eu/">Irwin Associates Web Design</a></span></p>
 [B]   <div id="menu">
        <ul>
            <li><a href="index.php" accesskey="1" title="Home page - accesskey 1" class="selected">Home</a></li>
            <li><a href="council.php" accesskey="c" title="Parish Council - accesskey c">Parish Council</a></li>
            <li><a href="recreation.php" accesskey="r" title="Recreation Committee - accesskey r">Recreation Committee</a></li>
            <li><a href="nwatch.php" title="Neighbourhood Watch">Neighbourhood Watch</a></li>
            <li><a href="church.php" accesskey="a" title="St Andrew's church - accesskey a">St Andrew&#8217;s</a></li>
            <li><a href="infolinks.php" accesskey="i" title="Information &amp; Links - accesskey i">Information &amp; Links</a></li>
            <li><a href="history.php" title="History">History</a></li>
            <li><a href="gallery.php" title="Photo Gallery">Photo Gallery</a></li>
            <li><a href="accesskeys.php" accesskey="0" title="Accessibility - accesskey 0">Accessibility</a></li>
            <li><a href="contact.php" accesskey="9" title="Contact Us - accesskey 9">Contact Us</a></li>
            <li><a href="sitemap.php" accesskey="3" title="Site Map - accesskey 3">Site Map</a></li>
        </ul>
    </div>
    <!-- end of menu -->[/B]
</div>
<!-- end of wrapper -->
</body>
</html>
3

Thanks Paul. That’s great. So long as the menu shows in IE6.

Ciao, Graham