Spooky Pony

Fixed Menus For Reals

Published: Tue, 27 May 2008 18:35:46 -0400

Okay, the menu is fixed for IE7, and continues to work in Safari and Firefox. It turns out that the fix is to tell the ul li structure to float left in CSS. I figured out what I was missing by comparing my local.css file to the CSS listed on A List Apart's article on Drop-Down Menus. Here's the relevant snippet from the local.css file:

ul#simple-menu{
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    }
ul#simple-menu li {
    float:left;
    }
ul#simple-menu li a{
    display:block;
    float:left;
    color:#1F2658;
    background:#b2b580;
    text-decoration:none;
    padding:0 9px 0 9px;
    font-size:1.1em;
    font-weight:800;
    text-transform:uppercase;
    height:3em;
    line-height:3em;
    text-shadow: 1px 1px 2px #555;
    }
ul#simple-menu li a:hover{
    background:#943F3B;
    text-shadow: 1px 1px 2px #555;
    }

I haven't bothered to test on IE6, but since the ALA article was written in 2004, I figure I'm in fairly safe territory. And, entertainingly, I don't have access to IE6 anymore with which to test it, so... ooops, oh well.

Categories: colophon  

Comments

Post a comment